File size: 1,573 Bytes
68722e4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | export interface FloatingInputProps {
id: string;
label: string;
type: 'text' | 'password';
value: string;
placeholder: string;
onChange: (value: string) => void;
suggestions?: string[];
containerClassName?: string;
labelClassName?: string;
inputClassName?: string;
}
export function FloatingInput({
id,
label,
type,
value,
placeholder,
onChange,
suggestions,
containerClassName = '',
labelClassName = '',
inputClassName = '',
}: FloatingInputProps) {
const datalistId = suggestions && suggestions.length > 0 ? `${id}__datalist` : undefined;
return (
<div className={`relative ${containerClassName}`.trim()}>
<label
htmlFor={id}
className={`absolute left-4 -top-2.5 px-2 bg-bg-primary text-xs font-medium text-text-secondary transition-colors duration-200 ease-ui ${labelClassName}`.trim()}
>
{label}
</label>
<input
id={id}
type={type}
value={value}
list={datalistId}
onChange={(e) => onChange(e.target.value)}
placeholder={placeholder}
className={`w-full px-4 py-4 bg-bg-secondary/50 rounded-2xl text-sm text-text-primary placeholder-text-secondary/40 focus:outline-none focus:ring-2 focus:ring-accent/20 focus:bg-bg-secondary/70 transition-colors duration-200 ease-ui ${inputClassName}`.trim()}
/>
{datalistId ? (
<datalist id={datalistId}>
{suggestions!.map((item) => (
<option key={item} value={item} />
))}
</datalist>
) : null}
</div>
);
}
|