Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Remove "Show All Tags" functionality and state from professional cards, displaying a fixed number of expertise tags with a static count.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-20 12:47:06 +05:30
parent 64f4234220
commit 2de25d7448
1 changed files with 3 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/home/TopProfessionals.tsx
View File

@@ -32,7 +32,6 @@ function ProfessionalCard({
}: ProfessionalCardProps) { }: ProfessionalCardProps) {
const starCount = rating ? Math.round(rating) : 0; const starCount = rating ? Math.round(rating) : 0;
const [imgLoaded, setImgLoaded] = useState(false); const [imgLoaded, setImgLoaded] = useState(false);
const [showAllTags, setShowAllTags] = useState(false);
const placeholder = '/assets/icons/user-placeholder-icon.svg'; const placeholder = '/assets/icons/user-placeholder-icon.svg';
const isPlaceholder = imageUrl === placeholder; const isPlaceholder = imageUrl === placeholder;
const INITIAL_TAG_COUNT = 4; const INITIAL_TAG_COUNT = 4;
@@ -109,7 +108,7 @@ function ProfessionalCard({
Expertise: Expertise:
</p> </p>
<div className="flex flex-wrap gap-1.5 mt-2 items-center"> <div className="flex flex-wrap gap-1.5 mt-2 items-center">
{(showAllTags ? expertise : expertise.slice(0, INITIAL_TAG_COUNT)).map((tag, index) => ( {expertise.slice(0, INITIAL_TAG_COUNT).map((tag, index) => (
<span <span
key={index} key={index}
className="border-[0.7px] border-[#00293d] rounded-[15px] px-[5px] h-[24px] flex items-center justify-center font-serif font-normal text-[13px] leading-[100%] text-[#00293d]" className="border-[0.7px] border-[#00293d] rounded-[15px] px-[5px] h-[24px] flex items-center justify-center font-serif font-normal text-[13px] leading-[100%] text-[#00293d]"
@@ -118,13 +117,8 @@ function ProfessionalCard({
</span> </span>
))} ))}
{expertise.length > INITIAL_TAG_COUNT && ( {expertise.length > INITIAL_TAG_COUNT && (
<span <span className="bg-[#e58625]/15 text-[#e58625] rounded-[15px] px-2 h-[24px] flex items-center justify-center font-serif font-semibold text-[12px] leading-[100%]">
role="button" +{expertise.length - INITIAL_TAG_COUNT} more
onClick={(e) => { e.preventDefault(); e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); setShowAllTags(prev => !prev); }}
onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
className="border-[0.7px] border-[#e58625] rounded-[15px] px-[5px] h-[24px] flex items-center justify-center font-serif font-normal text-[13px] leading-[100%] text-[#e58625] hover:bg-[#e58625]/10 transition-colors cursor-pointer"
>
{showAllTags ? 'Show Less' : `+${expertise.length - INITIAL_TAG_COUNT} more`}
</span> </span>
)} )}
</div> </div>