Merge branch 'newTool' of github.com:amanr-dev/WebDevTools into newTool

src/app/resume-builder/Form.jsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+
+const Form = ({ onSubmit }) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div>
+        <label className="block">Name</label>
+        <input
+          className="border p-2 w-full"
+          {...register("name", { required: true })}
+        />
+        {errors.name && (
+          <span className="text-red-500">This field is required</span>
+        )}
+      </div>
+      <div>
+        <label className="block">Email</label>
+        <input
+          className="border p-2 w-full"
+          type="email"
+          {...register("email", { required: true })}
+        />
+        {errors.email && (
+          <span className="text-red-500">This field is required</span>
+        )}
+      </div>
+      <div>
+        <label className="block">Education</label>
+        <textarea
+          className="border p-2 w-full"
+          {...register("education", { required: true })}
+        ></textarea>
+        {errors.education && (
+          <span className="text-red-500">This field is required</span>
+        )}
+      </div>
+      <div>
+        <label className="block">Experience</label>
+        <textarea
+          className="border p-2 w-full"
+          {...register("experience", { required: true })}
+        ></textarea>
+        {errors.experience && (
+          <span className="text-red-500">This field is required</span>
+        )}
+      </div>
+      <div>
+        <label className="block">Skills</label>
+        <textarea
+          className="border p-2 w-full"
+          {...register("skills", { required: true })}
+        ></textarea>
+        {errors.skills && (
+          <span className="text-red-500">This field is required</span>
+        )}
+      </div>
+      <button type="submit" className="bg-blue-500 text-white py-2 px-4">
+        Generate Resume
+      </button>
+    </form>
+  );
+};
+
+export default Form;

src/app/resume-builder/Preview.jsx

@@ -0,0 +1,55 @@
+"use client";
+
+import jsPDF from "jspdf";
+import "jspdf-autotable";
+
+const Preview = ({ data }) => {
+  const generatePDF = () => {
+    const doc = new jsPDF();
+    doc.text(data.name, 10, 10);
+    doc.text(data.email, 10, 20);
+    doc.autoTable({
+      startY: 30,
+      head: [["Education"]],
+      body: [[data.education]],
+    });
+    doc.autoTable({
+      startY: 50,
+      head: [["Experience"]],
+      body: [[data.experience]],
+    });
+    doc.autoTable({ startY: 70, head: [["Skills"]], body: [[data.skills]] });
+    doc.save("resume.pdf");
+  };
+
+  return (
+    <div>
+      <h2 className="text-xl">Preview</h2>
+      <div className="border p-4 mt-4">
+        <p>
+          <strong>Name:</strong> {data.name}
+        </p>
+        <p>
+          <strong>Email:</strong> {data.email}
+        </p>
+        <p>
+          <strong>Education:</strong> {data.education}
+        </p>
+        <p>
+          <strong>Experience:</strong> {data.experience}
+        </p>
+        <p>
+          <strong>Skills:</strong> {data.skills}
+        </p>
+      </div>
+      <button
+        onClick={generatePDF}
+        className="bg-green-500 text-white py-2 px-4 mt-4"
+      >
+        Download PDF
+      </button>
+    </div>
+  );
+};
+
+export default Preview;

src/app/resume-builder/page.jsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useState } from "react";
+import Form from "./Form";
+import Preview from "./Preview";
+
+const Home = () => {
+  const [formData, setFormData] = useState(null);
+
+  const handleFormSubmit = (data) => {
+    setFormData(data);
+  };
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="text-2xl mb-4">Resume Builder</h1>
+      <Form onSubmit={handleFormSubmit} />
+      {formData && <Preview data={formData} />}
+    </div>
+  );
+};
+
+export default Home;