41 lines
1.7 KiB
TypeScript
41 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
|
|
interface FilledInputProps {
|
|
label: string;
|
|
value: string | number;
|
|
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
type?: string;
|
|
icon?: React.ReactNode;
|
|
autoFocus?: boolean;
|
|
step?: string;
|
|
inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal";
|
|
autocapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters";
|
|
autoComplete?: string;
|
|
}
|
|
|
|
const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, onFocus, onBlur, type = "number", icon, autoFocus, step, inputMode, autocapitalize, autoComplete }) => (
|
|
<div className="relative group bg-surface-container-high rounded-t-lg border-b border-outline-variant hover:bg-white/5 focus-within:border-primary transition-colors">
|
|
<label className="absolute top-2 left-4 text-[10px] font-medium text-on-surface-variant flex items-center gap-1">
|
|
{icon} {label}
|
|
</label>
|
|
<input
|
|
type={type}
|
|
step={step}
|
|
inputMode={inputMode || (type === 'number' ? 'decimal' : 'text')}
|
|
autoFocus={autoFocus}
|
|
className="w-full pt-6 pb-2 px-4 bg-transparent text-2xl text-on-surface focus:outline-none placeholder-transparent"
|
|
placeholder="0"
|
|
value={value}
|
|
onChange={onChange}
|
|
onFocus={onFocus}
|
|
onBlur={onBlur}
|
|
autoCapitalize={autocapitalize}
|
|
autoComplete={autoComplete}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
export default FilledInput;
|