{line}
))} - - View Full Resume (PDF) - + > )} diff --git a/src/components/skill-card/index.tsx b/src/components/skill-card/index.tsx index 666ca2e..93a3c6a 100644 --- a/src/components/skill-card/index.tsx +++ b/src/components/skill-card/index.tsx @@ -1,12 +1,19 @@ +import { useState } from 'react'; import { skeleton } from '../../utils'; const SkillCard = ({ loading, skills, + previewLimit, }: { loading: boolean; skills: string[]; + previewLimit: number; }) => { + const [expanded, setExpanded] = useState(false); + const hasMore = skills.length > previewLimit; + const visible = + !hasMore || expanded ? skills : skills.slice(0, previewLimit); const renderSkeleton = () => { const array = []; for (let index = 0; index < 12; index++) { @@ -28,20 +35,38 @@ const SkillCard = ({ {loading ? ( skeleton({ widthCls: 'w-32', heightCls: 'h-8' }) ) : ( - Tech Stack + Tech stack )} + {!loading && hasMore && !expanded && ( ++ Showing {previewLimit} of {skills.length}. +
+ )}