const inputClasses = {
root: /*tw:*/ `group relative h-14 w-full rounded-md border border-[#a5a5a6] focus-within:border-primary focus-within:ring-1 focus-within:ring-primary`,
label: /*tw:*/ `absolute left-2 top-1/2 z-0 -translate-y-1/2 bg-white px-1 text-base pointer-events-none duration-200 group-focus-within:top-0 group-focus-within:text-xs group-focus-within:text-primary`,
input: /*tw:*/ `z-10 h-full w-full rounded-md px-3.5 py-4 outline-none`,
};
function Input({ placeholder, ...props }: React.ComponentProps<'input'>) {
return (
<div className={inputClasses.root}>
<label
className={cnMerge([inputClasses.label, props.value && 'top-0 text-xs'])}
htmlFor={props.id ?? props.name}
>
{placeholder}
</label>
<input id={props.id ?? props.name} {...props} className={inputClasses.input} />
</div>
);
}
Top comments (0)