change and add into components, widgets and pages

src/components/ui/Textarea.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef, useId } from 'react';
+import { cn } from '@/utils/utils';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, label, error, id, rows = 4, ...props }, ref) => {
+    const autoId = useId();
+    const textareaId = id || autoId;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={textareaId} className="block text-sm font-medium text-slate-700 mb-1.5">
+            {label} {props.required && <span className="text-blue-900 font-bold">*</span>}
+          </label>
+        )}
+        <textarea
+          id={textareaId}
+          ref={ref}
+          rows={rows}
+          className={cn(
+            "flex w-full rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500 shadow-sm transition-colors resize-y",
+            error && "border-red-500 focus:ring-red-500 focus:border-red-500",
+            className
+          )}
+          {...props}
+        />
+        {error && <p className="mt-1.5 text-xs font-medium text-red-500">{error}</p>}
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = "Textarea";