Fixed Show more style

vicheanath · Aug 19, 2024 · 501b70a · 501b70a
1 parent 30f37ec
commit 501b70a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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"),
 ];