MeetUp/src/components/labeled-input.tsx

31 lines
669 B
TypeScript

import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
export default function LabeledInput({
type,
label,
placeholder,
value,
...props
}: {
type: 'text' | 'email' | 'password';
label: string;
placeholder?: string;
value?: string;
} & React.InputHTMLAttributes<HTMLInputElement>) {
const elementId = Math.random().toString(36).substring(2, 15);
return (
<div className='flex flex-col gap-1'>
<Label htmlFor={name}>{label}</Label>
<Input
type={type}
placeholder={placeholder}
defaultValue={value}
id={elementId}
{...props}
/>
</div>
);
}