From 2de25d7448b8ffc1c2e04b1ee6b5cfd7abc4ae5f Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Fri, 20 Mar 2026 12:47:06 +0530
Subject: [PATCH] refactor: Remove "Show All Tags" functionality and state from
 professional cards, displaying a fixed number of expertise tags with a static
 count.

---
 src/components/home/TopProfessionals.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/home/TopProfessionals.tsx b/src/components/home/TopProfessionals.tsx
index da63b56..f689de7 100644
--- a/src/components/home/TopProfessionals.tsx
+++ b/src/components/home/TopProfessionals.tsx
@@ -32,7 +32,6 @@ function ProfessionalCard({
 }: ProfessionalCardProps) {
   const starCount = rating ? Math.round(rating) : 0;
   const [imgLoaded, setImgLoaded] = useState(false);
-  const [showAllTags, setShowAllTags] = useState(false);
   const placeholder = '/assets/icons/user-placeholder-icon.svg';
   const isPlaceholder = imageUrl === placeholder;
   const INITIAL_TAG_COUNT = 4;
@@ -109,7 +108,7 @@ function ProfessionalCard({
                 Expertise:
               </p>
               <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
                     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]"
@@ -118,13 +117,8 @@ function ProfessionalCard({
                   </span>
                 ))}
                 {expertise.length > INITIAL_TAG_COUNT && (
-                  <span
-                    role="button"
-                    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 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%]">
+                    +{expertise.length - INITIAL_TAG_COUNT} more
                   </span>
                 )}
               </div>