feat: added components

cv-project/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cv-project",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

cv-project/src/App.jsx

@@ -1,13 +1,14 @@
-import ContactInfo from './components/contactInfo'
+import GeneralInfo from "./components/generalInfo";
-import './App.css'
+import EducationInfo from "./components/educationInfo";
+import "./App.css";
 
 function App() {
-
   return (
     <>
-      <ContactInfo />
+      <GeneralInfo />
+      <EducationInfo />
     </>
-  )
+  );
 }
 
-export default App
+export default App;

cv-project/src/components/contactInfo.jsx

@@ -1,37 +0,0 @@
-import { useState } from "react"
-
-
-export default function ContactInfo() {
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-  const [phone, setPhone] = useState('');
-  const [email, setEmail] = useState('');
-
-  function handleFirstNameChange(event) {
-    setFirstName(event.target.value);
-  }
-  function handleLastNameChange(event) {
-    setLastName(event.target.value);
-  }
-
-
-  // function CustomInput({ placeholder, value, onChange }) {
-
-
-  return (
-    <>
-      <div className="contact-form">
-        <input placeholder='First Name' value={firstName} onChange={handleFirstNameChange} />
-        <input placeholder='Last Name' value={lastName} onChange={handleLastNameChange} />
-        <input placeholder='Email' value={email} onChange={(e => setEmail(e.target.value))} />
-        <input placeholder='Phone Number' value={phone} onChange={e => setPhone(e.target.value)} />
-      </div>
-      <div className="contact-form-render">
-        <h1>{firstName + ' ' + lastName}</h1>
-        <p>{email}</p>
-        <p>{phone}</p>
-      </div>
-    </>
-  )
-}
-

cv-project/src/components/educationInfo.jsx

@@ -0,0 +1,42 @@
+import { useState } from "react";
+
+export default function EducationInfo() {
+  const [graduationDate, setGraduationDate] = useState("");
+  const [schoolName, setSchoolName] = useState("");
+  const [fieldOfStudy, setFieldOfStudy] = useState("");
+
+  return (
+    <div>
+      <div className="education-info-form">
+        <input
+          type="text"
+          placeholder="School Name"
+          value={schoolName}
+          onChange={(e) => setSchoolName(e.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="Graduation Date"
+          value={graduationDate}
+          onChange={(e) => setGraduationDate(e.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="Field of Study"
+          value={fieldOfStudy}
+          onChange={(e) => setFieldOfStudy(e.target.value)}
+        />
+        <button>Submit</button>
+      </div>
+      <div className="education-info">
+        <h2>School: {schoolName}</h2>
+        <p>
+          Graduation Date: {graduationDate}
+          <br /> Field of Study: {fieldOfStudy}
+        </p>
+        <button>remove</button>
+        <button>edit</button>
+      </div>
+    </div>
+  );
+}

cv-project/src/components/generalInfo.jsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+
+export default function GeneralInfo() {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [email, setEmail] = useState("");
+
+  return (
+    <div>
+      <div className="contact-form">
+        <input
+          type="text"
+          placeholder="First Name"
+          value={firstName}
+          onChange={(e) => setFirstName(e.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="Last Name"
+          value={lastName}
+          onChange={(e) => setLastName(e.target.value)}
+        />
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="Phone Number"
+          value={phone}
+          onChange={(e) => setPhone(e.target.value)}
+        />
+      </div>
+      <div className="contact-info">
+        <h1>{firstName + " " + lastName}</h1>
+        <p>{email}</p>
+        <p>{phone}</p>
+      </div>
+    </div>
+  );
+}

cv-project/vite.config.js

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import react from '@vitejs/plugin-react'
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});