page preview update

mariuszciaston · Nov 13, 2024 · c078308 · c078308
1 parent 39969ec
commit c078308
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 40 deletions.
diff --git a/src/components/Form/Card.tsx b/src/components/Form/Card.tsx
@@ -11,8 +11,8 @@ const Card: React.FC<CardProps> = ({
   fullName,
   jobTitle,
   address,
-  email,
   phoneNumber,
+  email,
   website,
   summary,
   skills,
@@ -40,8 +40,8 @@ const Card: React.FC<CardProps> = ({
         fullName={fullName}
         jobTitle={jobTitle}
         address={address}
-        email={email}
         phoneNumber={phoneNumber}
+        email={email}
         website={website}
         summary={summary}
         skills={skills}

diff --git a/src/components/Form/Cards.tsx b/src/components/Form/Cards.tsx
@@ -27,16 +27,16 @@ const Cards: React.FC<InputSectionProps> = ({ data, onDataChange }) => {
           fullName={data.fullName}
           jobTitle={data.jobTitle}
           address={data.address}
-          email={data.email}
           phoneNumber={data.phoneNumber}
+          email={data.email}
           website={data.website}
           summary={data.summary}
           skills={data.skills}
           onFullNameChange={handleFieldChange("fullName")}
           onJobTitleChange={handleFieldChange("jobTitle")}
           onAddressChange={handleFieldChange("address")}
-          onEmailChange={handleFieldChange("email")}
           onPhoneNumberChange={handleFieldChange("phoneNumber")}
+          onEmailChange={handleFieldChange("email")}
           onWebsiteChange={handleFieldChange("website")}
           onSummaryChange={handleFieldChange("summary")}
           onSkillsChange={handleFieldChange("skills")}

diff --git a/src/components/Form/InputFields.tsx b/src/components/Form/InputFields.tsx
@@ -12,8 +12,8 @@ const InputFields: React.FC<
     | "fullName"
     | "jobTitle"
     | "address"
-    | "email"
     | "phoneNumber"
+    | "email"
     | "website"
     | "summary"
     | "skills"
@@ -32,8 +32,8 @@ const InputFields: React.FC<
   fullName,
   jobTitle,
   address,
-  email,
   phoneNumber,
+  email,
   website,
   summary,
   skills,
@@ -79,14 +79,6 @@ const InputFields: React.FC<
             value={address}
             onChange={onAddressChange}
           />
-          <InputField
-            label="Email"
-            type="email"
-            id="email"
-            placeholder="Enter your email"
-            value={email}
-            onChange={onEmailChange}
-          />
           <InputField
             label="Phone Number"
             type="tel"
@@ -95,6 +87,14 @@ const InputFields: React.FC<
             value={phoneNumber}
             onChange={onPhoneNumberChange}
           />
+          <InputField
+            label="Email"
+            type="email"
+            id="email"
+            placeholder="Enter your email"
+            value={email}
+            onChange={onEmailChange}
+          />
           <InputField
             label="Website"
             type="url"

diff --git a/src/components/Main.tsx b/src/components/Main.tsx
@@ -8,21 +8,22 @@ const Main = () => {
     fullName: "",
     jobTitle: "",
     address: "",
-    email: "",
     phoneNumber: "",
+    email: "",
     website: "",
     summary: "",
     skills: "",
   };
 
   const exampleData: DataProps = {
-    fullName: "Joe Doe",
+    fullName: "John Doe",
     jobTitle: "Software Developer",
     address: "Cracow, Poland",
-    email: "[email protected]",
-    phoneNumber: "666 777 888",
+    phoneNumber: "123 456 789",
+    email: "[email protected]",
     website: "www.example.com",
-    summary: "I am a ...",
+    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",
   };
 

diff --git a/src/components/Preview/PreviewSection.tsx b/src/components/Preview/PreviewSection.tsx
@@ -17,28 +17,68 @@ const PreviewSection: React.FC<DataProps> = ({
     >
       <div
         id="page"
-        className="flex aspect-[210/297] flex-col gap-4 break-words border bg-white p-[calc(100%/21*1.5)] shadow-lg"
+        className="flex aspect-[210/297] flex-col break-words border bg-white p-[calc(100%/21)] shadow-lg"
       >
-        <h1 className="font-bold">Personal Information</h1>
-        <hr className="border-t-2 border-black" />
-        <p className="border">{fullName}</p>
-        <p className="border">{jobTitle}</p>
-        <p className="border">{address}</p>
-        <p className="border">{email}</p>
-        <p className="border">{phoneNumber}</p>
-        <p className="border">{website}</p>
-        <h1 className="font-bold">Summary</h1>
-        <hr className="border-t-2 border-black" />
-        <p className="border">{summary}</p>
-        <h1 className="font-bold">Experience</h1>
-        <hr className="border-t-2 border-black" />
-        Tutaj doświadczenie ...
-        <h1 className="font-bold">Education</h1>
-        <hr className="border-t-2 border-black" />
-        Tutaj edukacja ...
-        <h1 className="font-bold">Skills</h1>
-        <hr className="border-t-2 border-black" />
-        <p className="border">{skills}</p>
+        <p className="text-4xl font-medium text-blue-500">{fullName}</p>
+        <p className="text-3xl font-light">{jobTitle}</p>
+
+        <br />
+
+        <p>
+          {address && (
+            <>
+              {address} {phoneNumber || email || website ? " | " : ""}
+            </>
+          )}
+          {phoneNumber && (
+            <>
+              {phoneNumber} {email || website ? " | " : ""}
+            </>
+          )}
+          {email && (
+            <>
+              {email} {website ? " | " : ""}
+            </>
+          )}
+          {website}
+        </p>
+
+        <br />
+
+        {summary && (
+          <>
+            <h2 className="font-medium text-blue-500">SUMMARY</h2>
+            <p>{summary}</p>
+            <br />
+          </>
+        )}
+
+        {/* <h2 className="font-medium text-blue-500">EXPERIENCE</h2>
+        <p>
+          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.
+        </p>
+
+        <br />
+
+        <h2 className="font-medium text-blue-500">EDUCATION</h2>
+        <p>
+          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.
+        </p>
+
+        <br /> */}
+
+        {skills && (
+          <>
+            <h2 className="font-medium text-blue-500">SKILLS</h2>
+            <p>{skills}</p>
+          </>
+        )}
       </div>
     </section>
   );