feat: Implement 'Show More/Less' functionality for specialization cards, refine expertise tag extraction logic, and update the 'Browse Experts' navigation link.

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>
   );
 }