Implemented the UI of the uqestion form

app/(root)/ask-question/page.tsx

@@ -1,5 +1,14 @@
+import QuestionForm from "@/components/forms/QuestionForm";
+
 const AskAQuestion = () => {
-  return <p>Question</p>;
+  return (
+    <>
+      <h1 className="h1-bold text-dark100_light900">Ask a question</h1>
+      <div className="mt-9">
+        <QuestionForm />
+      </div>
+    </>
+  );
 };
 
 export default AskAQuestion;

components/forms/AuthForm.tsx

@@ -69,7 +69,7 @@ const AuthForm = <T extends FieldValues>({
                     required
                     type={field.name === "password" ? "password" : "text"}
                     {...field}
-                    className="paragraph-regular background-light900_dark300 light-border-2 text-dark300 light700 no-focus min-h-12 rounded-1.5 border"
+                    className="paragraph-regular background-light900_dark300 light-border-2 text-dark300_light700 no-focus min-h-12 rounded-1.5 border"
                   />
                 </FormControl>
                 <FormMessage />

components/forms/QuestionForm.tsx

@@ -0,0 +1,114 @@
+"use client";
+import { AskQuestionSchema } from "@/lib/validations";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
+import { useForm } from "react-hook-form";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../ui/form";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+
+const QuestionForm = () => {
+  const form = useForm({
+    resolver: zodResolver(AskQuestionSchema),
+    defaultValues: {
+      title: "",
+      content: "",
+      tags: [],
+    },
+  });
+
+  const handleCreateQuestion = () => {};
+  return (
+    <Form {...form}>
+      <form
+        className="flex w-full flex-col gap-10"
+        onSubmit={form.handleSubmit(handleCreateQuestion)}
+      >
+        <FormField
+          control={form.control}
+          name="title"
+          render={({ field }) => (
+            <FormItem className="flex w-full flex-col">
+              <FormLabel className="paragraph-semibold text-dark400_light800">
+                Question Title <span className="text-primary-500">*</span>
+              </FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  className="paragraph-regular background-700_dark300 light-border-2 text-dark300_light700 no-focus min-h-[56px]  border"
+                />
+              </FormControl>
+              <FormDescription className="body-regular text-light-500 mt-2.5">
+                Be specific and imaginf your asking a question to another
+                person.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="content"
+          render={({ field }) => (
+            <FormItem className="flex w-full flex-col">
+              <FormLabel className="paragraph-semibold text-dark400_light800">
+                Detailed Explaination of your problem{" "}
+                <span className="text-primary-500">*</span>
+              </FormLabel>
+              <FormControl>Editor</FormControl>
+              <FormDescription className="body-regular text-light-500 mt-2.5">
+                Introduce the problem and expand on what you have put in the
+                title.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="tags"
+          render={({ field }) => (
+            <FormItem className="flex w-full flex-col gap-3">
+              <FormLabel className="paragraph-semibold text-dark400_light800">
+                Tags <span className="text-primary-500">*</span>
+              </FormLabel>
+              <FormControl>
+                <div>
+                  <Input
+                    className="paragraph-regular background-700_dark300 light-border-2 text-dark300_light700 no-focus min-h-[56px] border"
+                    placeholder="Add tags.."
+                    {...field}
+                  />
+                  Tags
+                </div>
+              </FormControl>
+              <FormDescription className="body-regular text-light-500 mt-2.5">
+                Add upto three tags describe what your question is about. Press
+                Enter to add a TAG
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className="mt-16 flex justify-end">
+          <Button
+            type="submit"
+            className="primary-gradient !text-light-900 w-fit"
+          >
+            Ask a Question
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};
+
+export default QuestionForm;

lib/validations.ts

@@ -47,3 +47,22 @@ export const SignUpSchema = z.object({
       message: "Password must contain at least one special character.",
     }),
 });
+
+export const AskQuestionSchema = z.object({
+  title: z
+    .string()
+    .min(1, { message: "Title is required" })
+    .max(100, { message: "Title cannot exceed 100 characters." }),
+
+  content: z.string().min(1, "Content is required."),
+
+  tags: z
+    .array(
+      z
+        .string()
+        .min(1, { message: "Atleast one tag is required." })
+        .max(30, "Connaot add more than 30 characters.")
+    )
+    .min(1, { message: "Atleast one tag is required." })
+    .max(3, { message: "Cannot add more then 3 tags." }),
+});