62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
'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,
|
|
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 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">
|
|
{displayedItems.map((item, idx) => (
|
|
<p key={idx} className="text-[#00293D] text-[14px] leading-[25px] font-normal font-serif text-center">
|
|
{item}
|
|
</p>
|
|
))}
|
|
</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>
|
|
);
|
|
}
|