Hide sections if required fields are not present

arifszn · Mar 1, 2024 · 62dea50 · 62dea50
1 parent c0283ce
commit 62dea50
Show file tree

Hide file tree

Showing 5 changed files with 204 additions and 53 deletions.
diff --git a/src/components/certification-card/index.tsx b/src/components/certification-card/index.tsx
@@ -78,22 +78,15 @@ const CertificationCard = ({
               renderSkeleton()
             ) : (
               <>
-                {certifications
-                  .filter(
-                    (certification) =>
-                      certification.year ||
-                      certification.name ||
-                      certification.body,
-                  )
-                  .map((certification, index) => (
-                    <ListItem
-                      key={index}
-                      year={certification.year}
-                      name={certification.name}
-                      body={certification.body}
-                      link={certification.link}
-                    />
-                  ))}
+                {certifications.map((certification, index) => (
+                  <ListItem
+                    key={index}
+                    year={certification.year}
+                    name={certification.name}
+                    body={certification.body}
+                    link={certification.link}
+                  />
+                ))}
               </>
             )}
           </ol>

diff --git a/src/components/education-card/index.tsx b/src/components/education-card/index.tsx
@@ -70,19 +70,14 @@ const EducationCard = ({
               renderSkeleton()
             ) : (
               <>
-                {educations
-                  .filter(
-                    (item) =>
-                      item.institution || item.degree || item.from || item.to,
-                  )
-                  .map((item, index) => (
-                    <ListItem
-                      key={index}
-                      time={`${item.from} - ${item.to}`}
-                      degree={item.degree}
-                      institution={item.institution}
-                    />
-                  ))}
+                {educations.map((item, index) => (
+                  <ListItem
+                    key={index}
+                    time={`${item.from} - ${item.to}`}
+                    degree={item.degree}
+                    institution={item.institution}
+                  />
+                ))}
               </>
             )}
           </ol>

diff --git a/src/components/experience-card/index.tsx b/src/components/experience-card/index.tsx
@@ -75,27 +75,19 @@ const ExperienceCard = ({
               renderSkeleton()
             ) : (
               <Fragment>
-                {experiences
-                  .filter(
-                    (experience) =>
-                      experience.company ||
-                      experience.position ||
-                      experience.from ||
-                      experience.to,
-                  )
-                  .map((experience, index) => (
-                    <ListItem
-                      key={index}
-                      time={`${experience.from} - ${experience.to}`}
-                      position={experience.position}
-                      company={experience.company}
-                      companyLink={
-                        experience.companyLink
-                          ? experience.companyLink
-                          : undefined
-                      }
-                    />
-                  ))}
+                {experiences.map((experience, index) => (
+                  <ListItem
+                    key={index}
+                    time={`${experience.from} - ${experience.to}`}
+                    position={experience.position}
+                    company={experience.company}
+                    companyLink={
+                      experience.companyLink
+                        ? experience.companyLink
+                        : undefined
+                    }
+                  />
+                ))}
               </Fragment>
             )}
           </ol>

diff --git a/src/components/publication-card/index.tsx b/src/components/publication-card/index.tsx
@@ -0,0 +1,157 @@
+import React, { Fragment } from 'react';
+import { SanitizedExperience } from '../../interfaces/sanitized-config';
+import { skeleton } from '../../utils';
+
+const ListItem = ({
+  time,
+  position,
+  company,
+  companyLink,
+}: {
+  time: React.ReactNode;
+  position?: React.ReactNode;
+  company?: React.ReactNode;
+  companyLink?: string;
+}) => (
+  <li className="mb-5 ml-4">
+    <div
+      className="absolute w-2 h-2 bg-base-300 rounded-full border border-base-300 mt-1.5"
+      style={{ left: '-4.5px' }}
+    ></div>
+    <div className="my-0.5 text-xs">{time}</div>
+    <h3 className="font-semibold">{position}</h3>
+    <div className="mb-4 font-normal">
+      <a href={companyLink} target="_blank" rel="noreferrer">
+        {company}
+      </a>
+    </div>
+  </li>
+);
+
+const PublicationCard = ({
+  experiences,
+  loading,
+}: {
+  experiences: SanitizedExperience[];
+  loading: boolean;
+}) => {
+  const renderSkeleton = () => {
+    const array = [];
+    for (let index = 0; index < 2; index++) {
+      array.push(
+        <ListItem
+          key={index}
+          time={skeleton({
+            widthCls: 'w-5/12',
+            heightCls: 'h-4',
+          })}
+          position={skeleton({
+            widthCls: 'w-6/12',
+            heightCls: 'h-4',
+            className: 'my-1.5',
+          })}
+          company={skeleton({ widthCls: 'w-6/12', heightCls: 'h-3' })}
+        />,
+      );
+    }
+
+    return array;
+  };
+  return (
+    <div className="col-span-1 lg:col-span-2">
+      <div className="grid grid-cols-2 gap-6">
+        <div className="col-span-2">
+          <div className="card compact bg-base-100 shadow bg-opacity-40">
+            <div className="card-body">
+              <div className="mx-3 flex items-center justify-between mb-2">
+                <h5 className="card-title">
+                  <span className="text-base-content opacity-70">
+                    Publications
+                  </span>
+                </h5>
+              </div>
+              <div className="col-span-2">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <a
+                    className="card shadow-lg compact bg-base-100 cursor-pointer"
+                    href="https://example.com"
+                  >
+                    <div className="p-8 h-full w-full">
+                      <div className="flex items-center flex-col">
+                        <div className="w-full">
+                          <div className="px-4">
+                            <div className="text-center w-full">
+                              <h2 className="font-semibold text-lg tracking-wide text-center opacity-60 mb-2">
+                                Publication Title
+                              </h2>
+                              <p className="text-base-content opacity-50 text-sm">
+                                Conference / Journal Name
+                              </p>
+                              <p className="text-base-content opacity-50 text-sm">
+                                Authors: John Doe, Jane Smith
+                              </p>
+                              <p className="mt-1 text-base-content text-opacity-60 text-sm">
+                                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. Duis aute irure dolor in
+                                reprehenderit in voluptate velit esse cillum
+                                dolore eu fugiat nulla pariatur. Excepteur sint
+                                occaecat cupidatat non proident, sunt in culpa
+                                qui officia deserunt mollit anim id est laborum.
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                  <a
+                    className="card shadow-lg compact bg-base-100 cursor-pointer"
+                    href="https://example.com"
+                  >
+                    <div className="p-8 h-full w-full">
+                      <div className="flex items-center flex-col">
+                        <div className="w-full">
+                          <div className="px-4">
+                            <div className="text-center w-full">
+                              <h2 className="font-semibold text-lg tracking-wide text-center opacity-60 mb-2">
+                                Publication Title
+                              </h2>
+                              <p className="text-base-content opacity-50 text-sm">
+                                Conference / Journal Name
+                              </p>
+                              <p className="text-base-content opacity-50 text-sm">
+                                Authors: John Doe, Jane Smith
+                              </p>
+                              <p className="mt-1 text-base-content text-opacity-60 text-sm">
+                                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. Duis aute irure dolor in
+                                reprehenderit in voluptate velit esse cillum
+                                dolore eu fugiat nulla pariatur. Excepteur sint
+                                occaecat cupidatat non proident, sunt in culpa
+                                qui officia deserunt mollit anim id est laborum.
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PublicationCard;
diff --git a/src/utils/index.tsx b/src/utils/index.tsx
@@ -82,9 +82,23 @@ export const getSanitizedConfig = (
         fileUrl: config?.resume?.fileUrl || '',
       },
       skills: config?.skills || [],
-      experiences: config?.experiences || [],
-      certifications: config?.certifications || [],
-      educations: config?.educations || [],
+      experiences:
+        config?.experiences?.filter(
+          (experience) =>
+            experience.company ||
+            experience.position ||
+            experience.from ||
+            experience.to,
+        ) || [],
+      certifications:
+        config?.certifications?.filter(
+          (certification) =>
+            certification.year || certification.name || certification.body,
+        ) || [],
+      educations:
+        config?.educations?.filter(
+          (item) => item.institution || item.degree || item.from || item.to,
+        ) || [],
       googleAnalytics: {
         id: config?.googleAnalytics?.id,
       },