Import source: src/components/ui/TextInput
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
@@ -0,0 +1,26 @@
|
||||
interface Props {
|
||||
label: string; optional?: boolean;
|
||||
value: string; onChange: (v: string) => void;
|
||||
placeholder?: string; type?: string;
|
||||
}
|
||||
|
||||
export function TextInput({ label, optional, value, onChange, placeholder, type = 'text' }: Props) {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-[15px] font-semibold flex items-center gap-1.5" style={{ color: 'var(--text-primary)' }}>
|
||||
{label}
|
||||
{optional && <span className="text-[13px] font-normal" style={{ color: 'var(--text-muted)' }}>(optional)</span>}
|
||||
</label>
|
||||
<input
|
||||
type={type} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder}
|
||||
className="h-12 px-4 rounded-[11px] text-[14px] outline-none transition-all"
|
||||
style={{
|
||||
background: 'var(--bg-input)', border: '1px solid var(--border-sub)',
|
||||
color: 'var(--text-primary)',
|
||||
}}
|
||||
onFocus={e => { e.currentTarget.style.borderColor = '#7C6FE0'; e.currentTarget.style.boxShadow = '0 0 0 3px rgba(124,111,224,0.12)'; }}
|
||||
onBlur={e => { e.currentTarget.style.borderColor = 'var(--border-sub)'; e.currentTarget.style.boxShadow = 'none'; }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user