assignment done

src/components/CreateNoteForm.jsx

@@ -1,25 +1,91 @@
 // TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema
-
-
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
 import { Save } from "lucide-react";
 
+// Zod validation schema
+const noteSchema = z.object({
+  title: z.string().min(1, "Title is required"),
+  content: z.string().min(1, "Content is required"),
+});
+
 const CreateNoteForm = () => {
   // TODO: Setup isSubmitting state with useState
-  // TODO: create navigate variable and set to useNavigate()
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // TODO: create navigate variable and set to useNavigate()
+  const navigate = useNavigate();
 
   // TODO: Set up the form with useForm from react-hook-form and zodResolver from @hookform/resolvers/zod
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(noteSchema),
+  });
 
   const sendToTheServer = async (data) => {
+
     // TODO: Send the data to the server
-    // TODO: Use axios to create a new note in the server using the endpoint http://localhost:3001/api/notes
+    setIsSubmitting(true);
+    try {
+       const response = await axios.post("http://localhost:3001/api/notes", data);
+       console.log("response", response.data);
+      navigate("/view-all");
+    } catch (error) {
+      console.error("Error creating note:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
-    <>
-    <h1>Create Note</h1>
-    {/* TODO: Setup the form with TailwindCSS, create a form with the following fields: title, content, and submit button */}
-    </>
+    <div className="min-h-screen bg-gray-50 px-4 py-10">
+      <div className="max-w-xl mx-auto bg-white p-8 rounded-xl shadow-md">
+        <h1 className="text-2xl font-bold text-center text-gray-800">Create Note</h1>
+        <p className="text-sm text-gray-500 text-center mb-6">
+
+        </p>
+
+        {/* TODO: Setup the form with TailwindCSS, create a form with the following fields: title, content, and submit button */}
+        <form onSubmit={handleSubmit(sendToTheServer)} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700">Title</label>
+            <input
+              type="text"
+              placeholder="Note Title"
+              {...register("title")}
+              className="w-full mt-1 px-4 py-2 border border-gray-300 rounded-md"
+            />
+            {errors.title && <p className="text-red-500 text-sm">{errors.title.message}</p>}
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700">Content</label>
+            <textarea
+              placeholder="Write your note here..."
+              {...register("content")}
+              className="w-full mt-1 px-4 py-2 border border-gray-300 rounded-md min-h-[100px]"
+            />
+            {errors.content && <p className="text-red-500 text-sm">{errors.content.message}</p>}
+          </div>
+
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="w-full flex items-center justify-center gap-2 bg-yellow-400 text-white font-semibold px-4 py-2 rounded-md hover:bg-yellow-500 transition"
+          >
+            <Save size={18} />
+            {isSubmitting ? "Saving..." : "Save Note"}
+          </button>
+        </form>
+      </div>
+    </div>
   );
 };