waan soo diray macalin

src/components/CreateNoteForm.jsx

@@ -1,24 +1,110 @@
 // TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema
 
-
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
 import { Save } from "lucide-react";
+import { noteSchema } from "../schema/notes";
+import { useState } from "react";
 
 const CreateNoteForm = () => {
   // TODO: Setup isSubmitting state with useState
   // TODO: create navigate variable and set to useNavigate()
+   const [isSubmitting, setIsSubmitting] = useState(false);
+   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
+        try {
+      setIsSubmitting(true);
+      await axios.post("http://localhost:3001/api/notes", data,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      navigate("/notes"); // redirect to notes list page
+    } catch (error) {
+      console.error("Error saving 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="flex justify-center items-center h-auto bg-gray-50">
+      <div className="w-full max-w-xl bg-white rounded-xl shadow p-6">
+        <h1 className="text-xl font-bold text-start text-gray-800 mb-6">
+          Create a New Note
+        </h1>
+
+        <form onSubmit={handleSubmit(sendToTheServer)} className="space-y-4">
+          {/* Title */}
+          <div>
+            <label 
+            htmlFor="title"
+            className="block text-sm font-medium text-gray-700">
+              Title
+            </label>
+            <input
+              id="title"
+              type="text"
+              placeholder="Note Title"
+              {...register("title")}
+              className="w-full mt-1 p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400"
+            />
+            {errors.title && (
+              <p className="text-red-500 text-sm">{errors.title.message}</p>
+            )}
+          </div>
+
+          {/* Content */}
+          <div>
+            <label 
+            htmlFor="content"
+            className="block text-sm font-medium text-gray-700">
+              Content
+            </label>
+            <textarea
+              id="content"
+              rows="4"
+              placeholder="Write your note here..."
+              {...register("content")}
+              className="w-full mt-1 p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400"
+            ></textarea>
+            {errors.content && (
+              <p className="text-red-500 text-sm">{errors.content.message}</p>
+            )}
+          </div>
+
+          {/* Submit Button */}
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="w-full flex items-center justify-center gap-2 bg-yellow-400 hover:bg-yellow-500 text-white font-medium py-2 rounded-lg transition"
+          >
+            <Save className="w-5 h-5" />
+            {isSubmitting ? "Saving..." : "Save Note"}
+          </button>
+        </form>
+      </div>
+    </div>
     </>
   );
 };

src/schema/notes.js

@@ -4,5 +4,7 @@ export const noteSchema = z.object({
   //TODO: create the title and content schema, 
   // Make sure the title is required and the content is required
   // Make sure the title is max 50 characters and the content is max 500 characters
+  title: z.string().min(2, "Title is required").max(50, "Title is too long"),
+  content: z.string().min(2, "Content is required").max(500, "Content is too long"),
 
   });