Abdullah.
569d887d1e
Renaming the package so any further PRs directed to the website are targeted to the reworked code instead of diverging. Once merged, I will start preparing this for deployment to dev to test before releasing to prod. Any improvements will also be applied to this package. I avoided making significant changes to API routes so nothing breaks, but will test it thoroughly today to confirm. That said, everything is ported - double checked. Big diff PR, impossible to review, but last one! No more rebuilds.
40 lines
942 B
TypeScript
40 lines
942 B
TypeScript
'use client';
|
|
|
|
import { fieldControlClassName } from './field-control-style';
|
|
|
|
// A single-line text control. Self-labels via ariaLabel (some steps show no
|
|
// visible label, only a placeholder), and flags invalid input so the shared
|
|
// control style paints the red border.
|
|
export function TextField({
|
|
ariaLabel,
|
|
inputMode,
|
|
invalid = false,
|
|
name,
|
|
onValueChange,
|
|
placeholder,
|
|
value,
|
|
}: {
|
|
ariaLabel: string;
|
|
inputMode?: 'email' | 'url' | 'text';
|
|
invalid?: boolean;
|
|
name: string;
|
|
onValueChange: (value: string) => void;
|
|
placeholder?: string;
|
|
value: string;
|
|
}) {
|
|
return (
|
|
<input
|
|
aria-invalid={invalid ? true : undefined}
|
|
aria-label={ariaLabel}
|
|
autoComplete="off"
|
|
className={fieldControlClassName}
|
|
inputMode={inputMode}
|
|
name={name}
|
|
onChange={(event) => onValueChange(event.target.value)}
|
|
placeholder={placeholder}
|
|
type="text"
|
|
value={value}
|
|
/>
|
|
);
|
|
}
|