File size: 2,045 Bytes
529c982 8b65a0f 529c982 e058d03 529c982 e058d03 529c982 8b65a0f 529c982 8b65a0f e058d03 8b65a0f e058d03 8b65a0f e058d03 8b65a0f e058d03 8b65a0f e058d03 529c982 8b65a0f 529c982 8b65a0f 529c982 | 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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 'use client';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';
export interface TextInputProps {
label: string;
value?: string;
defaultValue?: string;
onChange: (value: string) => void;
type?: 'text' | 'email' | 'password' | 'url' | 'tel';
className?: string;
disabled?: boolean;
placeholder?: string;
helpText?: string;
required?: boolean;
maxLength?: number;
minLength?: number;
pattern?: string;
isTextarea?: boolean;
rows?: number;
}
export default function TextInput({
label,
value,
defaultValue = '',
onChange,
type = 'text',
className = '',
disabled = false,
placeholder,
helpText,
required = false,
maxLength,
minLength,
pattern,
isTextarea = false,
rows = 3,
}: TextInputProps) {
const currentValue = value ?? defaultValue;
return (
<div className={className}>
<Label>
{label}
{required && <span className="text-destructive ml-1">*</span>}
</Label>
{isTextarea ? (
<Textarea
value={currentValue}
placeholder={placeholder}
onChange={(e) => onChange(e.target.value)}
disabled={disabled}
required={required}
maxLength={maxLength}
minLength={minLength}
rows={rows}
className={cn("mt-2", disabled && "opacity-50 cursor-not-allowed")}
/>
) : (
<Input
type={type}
value={currentValue}
placeholder={placeholder}
onChange={(e) => onChange(e.target.value)}
disabled={disabled}
required={required}
maxLength={maxLength}
minLength={minLength}
pattern={pattern}
className={cn("mt-2", disabled && "opacity-50 cursor-not-allowed")}
/>
)}
{helpText && (
<p className="text-xs text-muted-foreground mt-1">
{helpText}
</p>
)}
</div>
);
} |