From 719b784dfe98e328974bd710afb9681a0f44e2b7 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Mon, 2 Feb 2026 16:24:39 +0530
Subject: [PATCH] feat: Implement 'Show More/Less' functionality for
 specialization cards, refine expertise tag extraction logic, and update the
 'Browse Experts' navigation link.

---
 src/app/(user)/user/profiles/page.tsx         | 26 +++++++---
 src/components/home/TopProfessionals.tsx      |  2 +-
 src/components/profile/SpecializationCard.tsx | 51 ++++++++++++++-----
 3 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/src/app/(user)/user/profiles/page.tsx b/src/app/(user)/user/profiles/page.tsx
index 0a0fee0..25feea6 100644
--- a/src/app/(user)/user/profiles/page.tsx
+++ b/src/app/(user)/user/profiles/page.tsx
@@ -168,18 +168,24 @@ function ProfileCard({ profile }: ProfileCardProps) {
     return null;
   };
 
-  // Extract expertise tags from fieldValues
+  // Extract expertise tags from fieldValues - only include expertise-related fields
   const getExpertiseTags = (): string[] => {
     const tags: string[] = [];
 
-    // Fields to exclude from tags (they're displayed elsewhere, e.g., state/city shown in location)
-    const excludedFieldSlugs = ['state', 'city', 'description'];
+    // Only include expertise-related field slugs (matching profileDataMapper.ts)
+    const expertiseFieldSlugs = [
+      'about_me_expertise',
+      'expertise_areas',
+      'specializations',
+      'areas_of_expertise',
+      'expertise',
+    ];
 
-    // Add from fieldValues (dynamic profile fields like client_specialization, property_type, loan_type)
+    // Add from fieldValues - only expertise-related fields
     if (profile.fieldValues && profile.fieldValues.length > 0) {
       profile.fieldValues.forEach((fv) => {
-        // Skip excluded fields
-        if (excludedFieldSlugs.includes(fv.field.slug)) {
+        // Only include expertise-related fields
+        if (!expertiseFieldSlugs.includes(fv.field.slug)) {
           return;
         }
 
@@ -193,11 +199,15 @@ function ProfileCard({ profile }: ProfileCardProps) {
                 .split('_')
                 .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
                 .join(' ');
-              tags.push(displayValue);
+              if (!tags.includes(displayValue)) {
+                tags.push(displayValue);
+              }
             }
           });
         } else if (typeof value === 'string' && value.trim()) {
-          tags.push(value);
+          if (!tags.includes(value)) {
+            tags.push(value);
+          }
         }
       });
     }
diff --git a/src/components/home/TopProfessionals.tsx b/src/components/home/TopProfessionals.tsx
index a197fc9..1a48d33 100644
--- a/src/components/home/TopProfessionals.tsx
+++ b/src/components/home/TopProfessionals.tsx
@@ -273,7 +273,7 @@ export function TopProfessionals() {
             </p>
 
             {/* Browse Experts Button */}
-            <Link href="/agents">
+            <Link href="/user/profiles">
               <button className="bg-[#e58625] hover:bg-[#d47820] text-white font-fractul font-bold text-[16px] leading-[19px] px-8 py-3 rounded-[15px] transition-colors">
                 Browse Experts
               </button>
diff --git a/src/components/profile/SpecializationCard.tsx b/src/components/profile/SpecializationCard.tsx
index 5080388..a7d9704 100644
--- a/src/components/profile/SpecializationCard.tsx
+++ b/src/components/profile/SpecializationCard.tsx
@@ -1,36 +1,61 @@
 'use client';
 
+import { useState } from 'react';
 import Image from 'next/image';
 
 interface SpecializationCardProps {
   title: string;
   items: string[];
   icon: React.ReactNode;
+  initialItemsToShow?: number;
 }
 
-export function SpecializationCard({ title, items, icon }: SpecializationCardProps) {
+export function SpecializationCard({
+  title,
+  items,
+  icon,
+  initialItemsToShow = 3
+}: SpecializationCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Determine if we need to show the toggle button
+  const hasMoreItems = items.length > initialItemsToShow;
+
+  // Get the items to display based on expanded state
+  const displayedItems = isExpanded ? items : items.slice(0, initialItemsToShow);
+
+  const handleToggle = () => {
+    setIsExpanded(!isExpanded);
+  };
+
   return (
     <div className="bg-white rounded-[20px] p-6 text-center flex flex-col h-full border-[0.7px] border-[#E58625]">
       <div className="flex justify-center mb-3">{icon}</div>
       <h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4>
       <div className="flex-1">
-        {items.map((item, idx) => (
+        {displayedItems.map((item, idx) => (
           <p key={idx} className="text-[#00293D] text-[14px] leading-[25px] font-normal font-serif text-center">
             {item}
           </p>
         ))}
       </div>
-      <div className="mt-4 flex justify-center">
-        <button className="inline-flex items-center justify-center gap-1 h-[20px] w-[87px] border border-[#e58625] rounded-[20px] text-[#e58625] text-[10px] leading-[22px] font-bold font-serif hover:bg-[#e58625]/5 transition-colors">
-          Show More
-          <Image
-            src="/assets/icons/chevron-down-icon.svg"
-            alt="Show more"
-            width={10}
-            height={10}
-          />
-        </button>
-      </div>
+      {hasMoreItems && (
+        <div className="mt-4 flex justify-center">
+          <button
+            onClick={handleToggle}
+            className="inline-flex items-center justify-center gap-1 h-[20px] px-3 border border-[#e58625] rounded-[20px] text-[#e58625] text-[10px] leading-[22px] font-bold font-serif hover:bg-[#e58625]/5 transition-colors cursor-pointer"
+          >
+            {isExpanded ? 'Show Less' : 'Show More'}
+            <Image
+              src="/assets/icons/chevron-down-icon.svg"
+              alt={isExpanded ? 'Show less' : 'Show more'}
+              width={10}
+              height={10}
+              className={`transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
+            />
+          </button>
+        </div>
+      )}
     </div>
   );
 }