35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
type CategoryFormProps = {
|
|
label: string;
|
|
placeholder: string;
|
|
helper?: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
};
|
|
|
|
export default function CategoryForm({
|
|
label,
|
|
placeholder,
|
|
helper,
|
|
value,
|
|
onChange
|
|
}: CategoryFormProps) {
|
|
return (
|
|
<div className="rounded-3xl border border-slate-200/80 bg-white/90 p-6 shadow-[0_24px_60px_-40px_rgba(15,23,42,0.6)]">
|
|
<label className="flex flex-col gap-3">
|
|
<span className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">
|
|
{label}
|
|
</span>
|
|
<textarea
|
|
className="min-h-[160px] w-full resize-y rounded-2xl border border-slate-200/80 bg-white px-4 py-3 text-base text-slate-900 shadow-inner focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-400/40"
|
|
placeholder={placeholder}
|
|
value={value}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
/>
|
|
</label>
|
|
{helper ? (
|
|
<p className="mt-3 text-sm text-slate-500">{helper}</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|