From 034dbe0d2ccbb9c6e2ea8e12dff09af9a5e33978 Mon Sep 17 00:00:00 2001
From: Ariful Alam <ariful.dev@miaki.com.bd>
Date: Sat, 20 Jan 2024 18:34:32 +0600
Subject: [PATCH] Decide if the card should be displayed at higher level

---
 src/components/certification-card/index.tsx | 72 +++++++++----------
 src/components/education-card/index.tsx     | 66 ++++++++----------
 src/components/experience-card/index.tsx    | 76 ++++++++++-----------
 src/components/gitprofile.tsx               | 40 ++++++-----
 src/components/skill-card/index.tsx         | 56 +++++++--------
 5 files changed, 147 insertions(+), 163 deletions(-)

diff --git a/src/components/certification-card/index.tsx b/src/components/certification-card/index.tsx
index 4dbffdb..0a605b5 100644
--- a/src/components/certification-card/index.tsx
+++ b/src/components/certification-card/index.tsx
@@ -59,46 +59,40 @@ const CertificationCard = ({
   };
 
   return (
-    <>
-      {certifications?.length !== 0 && (
-        <div className="card shadow-lg compact bg-base-100">
-          <div className="card-body">
-            <div className="mx-3">
-              <h5 className="card-title">
-                {loading ? (
-                  skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
-                ) : (
-                  <span className="text-base-content opacity-70">
-                    Certification
-                  </span>
-                )}
-              </h5>
-            </div>
-            <div className="text-base-content text-opacity-60">
-              <ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
-                {loading ? (
-                  renderSkeleton()
-                ) : (
-                  <>
-                    {certifications.map((certification, index) => (
-                      <ListItem
-                        key={index}
-                        year={`${certification.year}`}
-                        name={certification.name}
-                        body={certification.body}
-                        link={
-                          certification.link ? certification.link : undefined
-                        }
-                      />
-                    ))}
-                  </>
-                )}
-              </ol>
-            </div>
-          </div>
+    <div className="card shadow-lg compact bg-base-100">
+      <div className="card-body">
+        <div className="mx-3">
+          <h5 className="card-title">
+            {loading ? (
+              skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
+            ) : (
+              <span className="text-base-content opacity-70">
+                Certification
+              </span>
+            )}
+          </h5>
         </div>
-      )}
-    </>
+        <div className="text-base-content text-opacity-60">
+          <ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
+            {loading ? (
+              renderSkeleton()
+            ) : (
+              <>
+                {certifications.map((certification, index) => (
+                  <ListItem
+                    key={index}
+                    year={`${certification.year}`}
+                    name={certification.name}
+                    body={certification.body}
+                    link={certification.link ? certification.link : undefined}
+                  />
+                ))}
+              </>
+            )}
+          </ol>
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/components/education-card/index.tsx b/src/components/education-card/index.tsx
index 641eac2..be52948 100644
--- a/src/components/education-card/index.tsx
+++ b/src/components/education-card/index.tsx
@@ -53,43 +53,37 @@ const EducationCard = ({
   };
 
   return (
-    <>
-      {educations?.length !== 0 && (
-        <div className="card shadow-lg compact bg-base-100">
-          <div className="card-body">
-            <div className="mx-3">
-              <h5 className="card-title">
-                {loading ? (
-                  skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
-                ) : (
-                  <span className="text-base-content opacity-70">
-                    Education
-                  </span>
-                )}
-              </h5>
-            </div>
-            <div className="text-base-content text-opacity-60">
-              <ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
-                {loading ? (
-                  renderSkeleton()
-                ) : (
-                  <>
-                    {educations.map((item, index) => (
-                      <ListItem
-                        key={index}
-                        time={`${item.from} - ${item.to}`}
-                        degree={item.degree}
-                        institution={item.institution}
-                      />
-                    ))}
-                  </>
-                )}
-              </ol>
-            </div>
-          </div>
+    <div className="card shadow-lg compact bg-base-100">
+      <div className="card-body">
+        <div className="mx-3">
+          <h5 className="card-title">
+            {loading ? (
+              skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
+            ) : (
+              <span className="text-base-content opacity-70">Education</span>
+            )}
+          </h5>
         </div>
-      )}
-    </>
+        <div className="text-base-content text-opacity-60">
+          <ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
+            {loading ? (
+              renderSkeleton()
+            ) : (
+              <>
+                {educations.map((item, index) => (
+                  <ListItem
+                    key={index}
+                    time={`${item.from} - ${item.to}`}
+                    degree={item.degree}
+                    institution={item.institution}
+                  />
+                ))}
+              </>
+            )}
+          </ol>
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/components/experience-card/index.tsx b/src/components/experience-card/index.tsx
index 0c806fe..cc58dea 100644
--- a/src/components/experience-card/index.tsx
+++ b/src/components/experience-card/index.tsx
@@ -58,48 +58,42 @@ const ExperienceCard = ({
     return array;
   };
   return (
-    <>
-      {experiences?.length !== 0 && (
-        <div className="card shadow-lg compact bg-base-100">
-          <div className="card-body">
-            <div className="mx-3">
-              <h5 className="card-title">
-                {loading ? (
-                  skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
-                ) : (
-                  <span className="text-base-content opacity-70">
-                    Experience
-                  </span>
-                )}
-              </h5>
-            </div>
-            <div className="text-base-content text-opacity-60">
-              <ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
-                {loading ? (
-                  renderSkeleton()
-                ) : (
-                  <Fragment>
-                    {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>
-            </div>
-          </div>
+    <div className="card shadow-lg compact bg-base-100">
+      <div className="card-body">
+        <div className="mx-3">
+          <h5 className="card-title">
+            {loading ? (
+              skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
+            ) : (
+              <span className="text-base-content opacity-70">Experience</span>
+            )}
+          </h5>
         </div>
-      )}
-    </>
+        <div className="text-base-content text-opacity-60">
+          <ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
+            {loading ? (
+              renderSkeleton()
+            ) : (
+              <Fragment>
+                {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>
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/components/gitprofile.tsx b/src/components/gitprofile.tsx
index 98a88d2..7d1ca0f 100644
--- a/src/components/gitprofile.tsx
+++ b/src/components/gitprofile.tsx
@@ -217,22 +217,30 @@ const GitProfile = ({ config }: { config: Config }) => {
                       github={sanitizedConfig.github}
                       social={sanitizedConfig.social}
                     />
-                    <SkillCard
-                      loading={loading}
-                      skills={sanitizedConfig.skills}
-                    />
-                    <ExperienceCard
-                      loading={loading}
-                      experiences={sanitizedConfig.experiences}
-                    />
-                    <CertificationCard
-                      loading={loading}
-                      certifications={sanitizedConfig.certifications}
-                    />
-                    <EducationCard
-                      loading={loading}
-                      educations={sanitizedConfig.educations}
-                    />
+                    {sanitizedConfig.skills.length !== 0 && (
+                      <SkillCard
+                        loading={loading}
+                        skills={sanitizedConfig.skills}
+                      />
+                    )}
+                    {sanitizedConfig.experiences.length !== 0 && (
+                      <ExperienceCard
+                        loading={loading}
+                        experiences={sanitizedConfig.experiences}
+                      />
+                    )}
+                    {sanitizedConfig.certifications.length !== 0 && (
+                      <CertificationCard
+                        loading={loading}
+                        certifications={sanitizedConfig.certifications}
+                      />
+                    )}
+                    {sanitizedConfig.educations.length !== 0 && (
+                      <EducationCard
+                        loading={loading}
+                        educations={sanitizedConfig.educations}
+                      />
+                    )}
                   </div>
                 </div>
                 <div className="lg:col-span-2 col-span-1">
diff --git a/src/components/skill-card/index.tsx b/src/components/skill-card/index.tsx
index 668fb3e..66fbff9 100644
--- a/src/components/skill-card/index.tsx
+++ b/src/components/skill-card/index.tsx
@@ -21,39 +21,33 @@ const SkillCard = ({
   };
 
   return (
-    <>
-      {skills?.length !== 0 && (
-        <div className="card shadow-lg compact bg-base-100">
-          <div className="card-body">
-            <div className="mx-3">
-              <h5 className="card-title">
-                {loading ? (
-                  skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
-                ) : (
-                  <span className="text-base-content opacity-70">
-                    Tech Stack
-                  </span>
-                )}
-              </h5>
-            </div>
-            <div className="p-3 flow-root">
-              <div className="-m-1 flex flex-wrap justify-center">
-                {loading
-                  ? renderSkeleton()
-                  : skills.map((skill, index) => (
-                      <div
-                        key={index}
-                        className="m-1 text-xs inline-flex items-center font-bold leading-sm px-3 py-1 badge-primary bg-opacity-90 rounded-full"
-                      >
-                        {skill}
-                      </div>
-                    ))}
-              </div>
-            </div>
+    <div className="card shadow-lg compact bg-base-100">
+      <div className="card-body">
+        <div className="mx-3">
+          <h5 className="card-title">
+            {loading ? (
+              skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
+            ) : (
+              <span className="text-base-content opacity-70">Tech Stack</span>
+            )}
+          </h5>
+        </div>
+        <div className="p-3 flow-root">
+          <div className="-m-1 flex flex-wrap justify-center">
+            {loading
+              ? renderSkeleton()
+              : skills.map((skill, index) => (
+                  <div
+                    key={index}
+                    className="m-1 text-xs inline-flex items-center font-bold leading-sm px-3 py-1 badge-primary bg-opacity-90 rounded-full"
+                  >
+                    {skill}
+                  </div>
+                ))}
           </div>
         </div>
-      )}
-    </>
+      </div>
+    </div>
   );
 };