46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
|
const spanClasses: Record<number, string> = {
|
||
|
|
1: "md:col-span-1",
|
||
|
|
2: "md:col-span-2",
|
||
|
|
};
|
||
|
|
|
||
|
|
const fieldClass = (isError?: boolean) =>
|
||
|
|
`w-full rounded-lg p-3 text-sm border outline-none text-title placeholder:text-body md:text-base resize-none md:min-h-35 ${isError ? "border-red-500 bg-red-50/40" : "border-border focus:border-primary-600"}`;
|
||
|
|
|
||
|
|
export default function TextareaInput({
|
||
|
|
label,
|
||
|
|
name,
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
placeholder,
|
||
|
|
isDisable,
|
||
|
|
isError,
|
||
|
|
textFoot,
|
||
|
|
colSpan = 1,
|
||
|
|
rows = 5,
|
||
|
|
}: {
|
||
|
|
label?: string;
|
||
|
|
name: string;
|
||
|
|
value?: string;
|
||
|
|
onChange: (value: string) => void;
|
||
|
|
placeholder?: string;
|
||
|
|
isDisable?: boolean;
|
||
|
|
isError?: boolean;
|
||
|
|
textFoot?: string;
|
||
|
|
colSpan?: number;
|
||
|
|
rows?: number;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div className={`flex flex-col gap-1 ${spanClasses[colSpan] || "md:col-span-1"}`}>
|
||
|
|
{label && (
|
||
|
|
<label htmlFor={name} className="text-sm text-subtitle md:text-base">
|
||
|
|
{label}
|
||
|
|
</label>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<textarea id={name} name={name} rows={rows} value={value || ""} onChange={(evt) => onChange(evt?.target?.value)} placeholder={placeholder} disabled={isDisable} className={fieldClass(isError)} />
|
||
|
|
|
||
|
|
{textFoot && <p className="text-[13px] text-red-500">{textFoot}</p>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|