Merge pull request #1567 from acm-ucr/Fuyuki/Textarea

Added textarea

src/components/form/form/Questions.jsx

@@ -3,7 +3,7 @@ import Radio from "@/components/Radio";
 import Checkbox from "@/components/Checkbox";
 import Input from "@/components/Input";
 import Button from "@/components/Button.jsx";
-import Textarea from "@/components/form/form/Textarea.jsx";
+import { Textarea } from "@/components/ui/textarea";
 import Upload from "@/components/form/form/Upload";
 import toaster from "@/utils/toaster";
 import Link from "next/link";
@@ -162,13 +162,17 @@ const Questions = ({
           )}
           {field.input === "textarea" && (
             <Textarea
+              data-cy={`${field.title}-textarea`}
+              className="border-1 w-full resize-none border border-black pl-3 placeholder:text-hackathon-gray-200 focus:outline-none"
+              maxLength={500}
+              value={object[field.name]}
+              onChange={(e) =>
+                setObject({ ...object, [field.name]: e.target.value })
+              }
+              placeholder={field.placeholder}
               name={field.name}
               rows={field.rows}
               title={field.title}
-              placeholder={field.placeholder}
-              value={object[field.name]}
-              user={object}
-              setUser={setObject}
               required={field.required}
             />
           )}

src/components/ui/textarea.jsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { cn } from "@/utils/tailwind";
+
+const Textarea = React.forwardRef(
+  ({ className, title, required, ...props }, ref) => {
+    return (
+      <div className="flex flex-col">
+        <p className="mb-1 font-semibold">
+          {title}
+          {required && <span className="text-red-500">*</span>}
+        </p>
+        <textarea
+          className={cn(
+            "flex min-h-[80px] w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
+            className,
+          )}
+          ref={ref}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };