55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { Textarea } from "../textarea";
|
|
import { Label } from "../label";
|
|
import { useId } from "react";
|
|
|
|
interface TextAreaInputProps extends React.ComponentProps<typeof Textarea> {
|
|
label?: string;
|
|
containerProps?: React.ComponentProps<"div">;
|
|
}
|
|
|
|
function TextAreaInput({
|
|
className,
|
|
label,
|
|
containerProps,
|
|
...props
|
|
}: TextAreaInputProps) {
|
|
const id = useId();
|
|
const textareaId = props.id || id;
|
|
|
|
return (
|
|
<div
|
|
{...containerProps}
|
|
className={cn("w-full flex flex-col gap-2", containerProps?.className)}
|
|
>
|
|
{label && (
|
|
<Label
|
|
htmlFor={textareaId}
|
|
className="text-muted-foreground font-inter font-medium text-base"
|
|
>
|
|
{label}
|
|
</Label>
|
|
)}
|
|
<Textarea
|
|
data-slot="textarea-input"
|
|
className={cn(
|
|
"py-3.5 px-4",
|
|
"font-inter text-[18px]/[28px] font-semibold text-foreground",
|
|
"placeholder:text-muted-foreground placeholder:text-[18px]/[28px] font-medium",
|
|
"border-2 border-primary/30 rounded-2xl",
|
|
className
|
|
)}
|
|
id={textareaId}
|
|
{...props}
|
|
/>
|
|
{props["aria-invalid"] && (
|
|
<p className="text-destructive font-inter font-medium text-xs">
|
|
{props["aria-errormessage"]}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { TextAreaInput };
|