add EducationForm and ExperienceForm

mariuszciaston · Nov 15, 2024 · 9094fc0 · 9094fc0
1 parent 5f46049
commit 9094fc0
Show file tree

Hide file tree

Showing 8 changed files with 240 additions and 79 deletions.
diff --git a/src/components/form/Card.tsx b/src/components/form/Card.tsx
@@ -16,6 +16,8 @@ const Card: React.FC<CardProps> = ({
   website,
   summary,
   skills,
+  experience,
+  education,
   onFullNameChange,
   onJobTitleChange,
   onAddressChange,
@@ -24,6 +26,8 @@ const Card: React.FC<CardProps> = ({
   onWebsiteChange,
   onSummaryChange,
   onSkillsChange,
+  // onExperienceChange,
+  // onEducationChange,
 }) => {
   return (
     <div className="flex flex-col gap-4 rounded-md border bg-white p-4 shadow">
@@ -45,6 +49,8 @@ const Card: React.FC<CardProps> = ({
         website={website}
         summary={summary}
         skills={skills}
+        experience={experience}
+        education={education}
         onFullNameChange={onFullNameChange}
         onJobTitleChange={onJobTitleChange}
         onAddressChange={onAddressChange}
@@ -53,6 +59,8 @@ const Card: React.FC<CardProps> = ({
         onWebsiteChange={onWebsiteChange}
         onSummaryChange={onSummaryChange}
         onSkillsChange={onSkillsChange}
+        // onExperienceChange={onExperienceChange}
+        // onEducationChange={onEducationChange}
       />
     </div>
   );

diff --git a/src/components/form/Cards.tsx b/src/components/form/Cards.tsx
@@ -26,6 +26,8 @@ const Cards: React.FC<InputSectionProps> = ({ data, onDataChange }) => {
           website={data.website}
           summary={data.summary}
           skills={data.skills}
+          experience={data.experience}
+          education={data.education}
           onFullNameChange={handleFieldChange("fullName")}
           onJobTitleChange={handleFieldChange("jobTitle")}
           onAddressChange={handleFieldChange("address")}
@@ -34,6 +36,8 @@ const Cards: React.FC<InputSectionProps> = ({ data, onDataChange }) => {
           onWebsiteChange={handleFieldChange("website")}
           onSummaryChange={handleFieldChange("summary")}
           onSkillsChange={handleFieldChange("skills")}
+          // onExperienceChange={handleFieldChange("experience")}
+          // onEducationChange={handleFieldChange("education")}
         />
       ))}
     </div>

diff --git a/src/components/form/EducationForm.tsx b/src/components/form/EducationForm.tsx
@@ -0,0 +1,49 @@
+import InputField from "../common/InputField";
+import Button from "../common/Button";
+import { CardProps } from "../types";
+
+const EducationForm: React.FC<Pick<CardProps, "education">> = ({
+  education,
+}) => {
+  return (
+    <div className="flex flex-col gap-4 rounded-md bg-orange-100 p-4">
+      <InputField
+        label="School/University"
+        type="text"
+        id="school"
+        placeholder="Enter School/University"
+        value={education[0].school}
+        // onChange={onEducationChange}
+      />
+      <InputField
+        label="City"
+        type="text"
+        id="city"
+        placeholder="Enter a city"
+      />
+      <InputField
+        label="Degree"
+        type="text"
+        id="degree"
+        placeholder="Enter Degree"
+      />
+
+      <InputField
+        label="Start Date"
+        type="date"
+        id="startDate"
+        placeholder="Enter start date"
+      />
+      <InputField
+        label="End Date"
+        type="date"
+        id="endDate"
+        placeholder="Enter end date"
+      />
+
+      <Button text="Remove" className="bg-orange-500" />
+    </div>
+  );
+};
+
+export default EducationForm;
diff --git a/src/components/form/ExperienceForm.tsx b/src/components/form/ExperienceForm.tsx
@@ -0,0 +1,54 @@
+import InputField from "../common/InputField";
+import Button from "../common/Button";
+import { CardProps } from "../types";
+
+const ExperienceForm: React.FC<Pick<CardProps, "experience">> = ({
+  experience,
+}) => {
+  return (
+    <div className="flex flex-col gap-4 rounded-md bg-orange-100 p-4">
+      <InputField
+        label="Position"
+        type="text"
+        id="position"
+        placeholder="Enter your Role/Job Title"
+        value={experience[0].position}
+        // onChange={onExperienceChange}
+      />
+      <InputField
+        label="Company"
+        type="text"
+        id="company"
+        placeholder="Enter company's name"
+      />
+      <InputField
+        label="City"
+        type="text"
+        id="city"
+        placeholder="Enter a city"
+      />
+      <InputField
+        label="Description"
+        type="text"
+        id="description"
+        placeholder="Job responsibility"
+      />
+      <InputField
+        label="Start Date"
+        type="date"
+        id="startDate"
+        placeholder="Enter start date"
+      />
+      <InputField
+        label="End Date"
+        type="date"
+        id="endDate"
+        placeholder="Enter end date"
+      />
+
+      <Button text="Remove" className="bg-orange-500" />
+    </div>
+  );
+};
+
+export default ExperienceForm;
diff --git a/src/components/form/InputFields.tsx b/src/components/form/InputFields.tsx
@@ -3,6 +3,8 @@ import Textarea from "../common/Textarea";
 import Button from "../common/Button";
 import { CardProps } from "../types";
 import cardDetails from "./cardDetails";
+import ExperienceForm from "./ExperienceForm";
+import EducationForm from "./EducationForm";
 
 const InputFields: React.FC<
   Pick<
@@ -17,6 +19,8 @@ const InputFields: React.FC<
     | "website"
     | "summary"
     | "skills"
+    | "experience"
+    | "education"
     | "onFullNameChange"
     | "onJobTitleChange"
     | "onAddressChange"
@@ -25,6 +29,8 @@ const InputFields: React.FC<
     | "onWebsiteChange"
     | "onSummaryChange"
     | "onSkillsChange"
+    // | "onExperienceChange"
+    // | "onEducationChange"
   >
 > = ({
   isOpen,
@@ -37,6 +43,8 @@ const InputFields: React.FC<
   website,
   summary,
   skills,
+  experience,
+  education,
   onFullNameChange,
   onJobTitleChange,
   onAddressChange,
@@ -45,11 +53,19 @@ const InputFields: React.FC<
   onWebsiteChange,
   onSummaryChange,
   onSkillsChange,
+  // onExperienceChange,
+  // onEducationChange
 }) => {
   if (!isOpen) {
     return null;
   }
 
+  // const [data, setData] = useState<DataProps>({ ...emptyData });
+
+  // const addExperienceForm = () => {
+  //   setData(exampleData);
+  // };
+
   return (
     <>
       {title === cardDetails[0].title && (
@@ -118,83 +134,31 @@ const InputFields: React.FC<
 
       {title === cardDetails[2].title && (
         <>
-          <InputField
-            label="Position"
-            type="text"
-            id="position"
-            placeholder="Enter your Role/Job Title"
-          />
-          <InputField
-            label="Company"
-            type="text"
-            id="company"
-            placeholder="Enter company's name"
-          />
-          <InputField
-            label="City"
-            type="text"
-            id="city"
-            placeholder="Enter a city"
-          />
-          <InputField
-            label="Description"
-            type="text"
-            id="description"
-            placeholder="Job responsibility"
-          />
-          <InputField
-            label="Start Date"
-            type="date"
-            id="startDate"
-            placeholder="Enter start date"
-          />
-          <InputField
-            label="End Date"
-            type="date"
-            id="endDate"
-            placeholder="Enter end date"
-          />
+          <div id="ExperienceForms" className="flex flex-col gap-4">
+            <ExperienceForm experience={experience} />
+            <ExperienceForm experience={experience} />
+          </div>
 
-          <Button text="Remove" className="bg-red-500" />
-          <Button text="Add" className="bg-blue-500" />
+          <Button
+            // onClick={addExperienceForm}
+            text="Add"
+            className="bg-blue-500"
+          />
         </>
       )}
+
       {title === cardDetails[3].title && (
         <>
-          <InputField
-            label="School/University"
-            type="text"
-            id="school"
-            placeholder="Enter School/University"
-          />
-          <InputField
-            label="City"
-            type="text"
-            id="city"
-            placeholder="Enter a city"
-          />
-          <InputField
-            label="Degree"
-            type="text"
-            id="degree"
-            placeholder="Enter Degree"
-          />
+          <div id="EducationForms" className="flex flex-col gap-4">
+            <EducationForm education={education} />
+            <EducationForm education={education} />
+          </div>
 
-          <InputField
-            label="Start Date"
-            type="date"
-            id="startDate"
-            placeholder="Enter start date"
-          />
-          <InputField
-            label="End Date"
-            type="date"
-            id="endDate"
-            placeholder="Enter end date"
+          <Button
+            // onClick={addEducationForm}
+            text="Add"
+            className="bg-blue-500"
           />
-
-          <Button text="Remove" className="bg-red-500" />
-          <Button text="Add" className="bg-blue-500" />
         </>
       )}
       {title === cardDetails[4].title && (

diff --git a/src/components/form/data.ts b/src/components/form/data.ts
@@ -9,6 +9,31 @@ const emptyData: DataProps = {
   website: "",
   summary: "",
   skills: "",
+
+  // experience: "abc",
+
+  experience: [
+    {
+      // id: "1",
+      position: "",
+      // company: "",
+      // city: "",
+      // description: "",
+      // startDate: "",
+      // endDate: "",
+    },
+  ],
+
+  education: [
+    {
+      // id: "1",
+      school: "",
+      // city: "",
+      // degree: "",
+      // startDate: "",
+      // endDate: "",
+    },
+  ],
 };
 
 const exampleData: DataProps = {
@@ -21,6 +46,50 @@ const exampleData: DataProps = {
   summary:
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
   skills: "React / Typescript / Tailwind",
+
+  // experience: "123",
+
+  experience: [
+    {
+      // id: "1",
+      position: "Example Position 1",
+      // company: "Example Company 1",
+      // city: "Cracow, Poland",
+      // description:
+      //   "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      // startDate: "2020-01-01",
+      // endDate: "2021-01-01",
+    },
+    //   {
+    //     // id: "2",
+    //     position: "Example Position 2",
+    //     company: "Example Company 2",
+    //     city: "Cracow, Poland",
+    //     description:
+    //       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    //     startDate: "2020-01-01",
+    //     endDate: "2021-01-01",
+    //   },
+  ],
+
+  education: [
+    {
+      // id: "1",
+      school: "Example School",
+      // city: "Cracow, Poland",
+      // degree: "Bachelor of Science",
+      // startDate: "2020-01-01",
+      // endDate: "2021-01-01",
+    },
+    // {
+    //   // id: "2",
+    //   school: "Example School",
+    //   city: "Cracow, Poland",
+    //   degree: "Bachelor of Science",
+    //   startDate: "2020-01-01",
+    //   endDate: "2021-01-01",
+    // },
+  ],
 };
 
 export { emptyData, exampleData };