feat: add error variant to TextArea (#5890)

apps/web/src/components/Shared/UI/TextArea.tsx

···
+import { cva, type VariantProps } from "class-variance-authority";
 import type { ComponentProps } from "react";
 import { forwardRef, memo, useId } from "react";
 import cn from "@/helpers/cn";
 import { FieldError } from "./Form";
 
-interface TextAreaProps extends ComponentProps<"textarea"> {
+const textAreaVariants = cva(
+  [
+    "w-full rounded-xl border bg-white px-4 py-2 shadow-xs",
+    "focus:border-gray-500 focus:ring-0",
+    "disabled:bg-gray-500/20 disabled:opacity-60",
+    "dark:bg-gray-900"
+  ],
+  {
+    defaultVariants: { error: false },
+    variants: {
+      error: {
+        false: "border-gray-300 dark:border-gray-700",
+        true: "border-red-500 placeholder:text-red-500"
+      }
+    }
+  }
+);
+
+interface TextAreaProps
+  extends ComponentProps<"textarea">,
+    VariantProps<typeof textAreaVariants> {
   label?: string;
 }
 
 const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({ label, ...props }, ref) => {
+  ({ className, error, label, ...props }, ref) => {
     const id = useId();
 
     return (
       <label className="w-full" htmlFor={id}>
         {label ? <div className="label">{label}</div> : null}
         <textarea
-          className={cn(
-            "w-full rounded-xl border border-gray-300 bg-white px-4 py-2 shadow-xs",
-            "focus:border-gray-500 focus:ring-0",
-            "disabled:bg-gray-500/20 disabled:opacity-60",
-            "dark:border-gray-700 dark:bg-gray-900"
-          )}
+          className={cn(textAreaVariants({ className, error }))}
           id={id}
           ref={ref}
           {...props}