From 501b70aabadcb56eba8393604909176ad6b0e00b Mon Sep 17 00:00:00 2001
From: Vichea <nathvichea1@gmail.com>
Date: Mon, 19 Aug 2024 08:51:30 -0500
Subject: [PATCH] Fixed Show more style

---
 src/container/Skills/Skills.scss | 11 +++++++++++
 src/container/Skills/Skills.tsx  | 12 +++++++++---
 src/container/Skills/skill.ts    |  2 +-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/container/Skills/Skills.scss b/src/container/Skills/Skills.scss
index 14635d6..19f4159 100644
--- a/src/container/Skills/Skills.scss
+++ b/src/container/Skills/Skills.scss
@@ -131,6 +131,17 @@
     margin-bottom: 1rem;
   }
 }
+.app__skills-exp-show-more {
+  display: flex;
+  margin-top: 1rem;
+  cursor: pointer;
+  color: var(--secondary-color);
+  font-weight: 500;
+  :hover {
+    text-decoration: underline;
+    color: var(--secondary-color);
+  }
+}
 
 .app__skills-exp-item {
   width: 100%;
diff --git a/src/container/Skills/Skills.tsx b/src/container/Skills/Skills.tsx
index 8af2d33..495ba61 100644
--- a/src/container/Skills/Skills.tsx
+++ b/src/container/Skills/Skills.tsx
@@ -85,7 +85,6 @@ interface JobDescriptionCollapsibleProps {
 const JobDescriptionCollapsible = ({
   jobDescriptions,
 }: JobDescriptionCollapsibleProps) => {
-  // show only 3 job descriptions
   const [showCount, setShowCount] = useState<number>(3);
 
   const showMore = jobDescriptions.length > showCount;
@@ -103,12 +102,19 @@ const JobDescriptionCollapsible = ({
           </li>
         ))}
       </ul>
-      {showMore && (
+      {showMore ? (
         <motion.div
           onClick={showMoreHandler}
           className="app__skills-exp-show-more"
         >
-          <p className="p-text">Show more</p>
+          <p className="p-text text-link">Show more</p>
+        </motion.div>
+      ) : (
+        <motion.div
+          onClick={() => setShowCount(3)}
+          className="app__skills-exp-show-more"
+        >
+          <p className="p-text text-link">Show less</p>
         </motion.div>
       )}
     </>
diff --git a/src/container/Skills/skill.ts b/src/container/Skills/skill.ts
index 753e77c..80ebf4a 100644
--- a/src/container/Skills/skill.ts
+++ b/src/container/Skills/skill.ts
@@ -31,6 +31,6 @@ export const skillData = [
   new Skill("TypeScript", images.typescript, "#77c0f0"),
   new Skill("HTML", images.html, "#eb9580"),
   new Skill("JavaScript", images.javascript, "#f0db4f"),
-  new Skill("Git", images.mu5, "#aad4eb"),
+  new Skill("Git", images.git, "#aad4eb"),
   new Skill("Node", images.node, "#a9e4a1"),
 ];