82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import { SpecializationCard } from './SpecializationCard';
|
|
import { SpecializationFieldsData } from '@/utils/profileDataMapper';
|
|
|
|
interface SpecializationSectionProps {
|
|
fieldsData: SpecializationFieldsData;
|
|
}
|
|
|
|
export function SpecializationSection({ fieldsData }: SpecializationSectionProps) {
|
|
const { fields } = fieldsData;
|
|
|
|
// Don't render if no fields with data
|
|
if (!fields || fields.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
// Split fields for layout: first 3 in top row, rest in bottom row
|
|
const topRowFields = fields.slice(0, 3);
|
|
const bottomRowFields = fields.slice(3);
|
|
|
|
return (
|
|
<div className="bg-[#e8e8e8] rounded-[20px] p-8">
|
|
<div className="text-center mb-8">
|
|
<h2 className="text-[20px] font-bold text-[#00293D] font-fractul leading-[24px]">Specialization</h2>
|
|
<p className="text-[14px] font-medium text-[#00293D] font-fractul leading-[17px]">Area Of Expertise and Focus</p>
|
|
</div>
|
|
|
|
{/* Top row - up to 3 cards */}
|
|
{topRowFields.length > 0 && (
|
|
<div className={`flex flex-col lg:grid lg:items-start gap-6 mb-6 ${
|
|
topRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
|
|
topRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
|
|
'lg:grid-cols-3'
|
|
}`}>
|
|
{topRowFields.map((field) => (
|
|
<SpecializationCard
|
|
key={field.fieldSlug}
|
|
title={field.fieldName}
|
|
items={field.values}
|
|
icon={
|
|
<Image
|
|
src={field.icon || '/assets/icons/home-icon.svg'}
|
|
alt={field.fieldName}
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Bottom row - remaining cards */}
|
|
{bottomRowFields.length > 0 && (
|
|
<div className={`flex flex-col lg:grid lg:items-start gap-6 ${
|
|
bottomRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
|
|
bottomRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
|
|
'lg:grid-cols-3'
|
|
}`}>
|
|
{bottomRowFields.map((field) => (
|
|
<SpecializationCard
|
|
key={field.fieldSlug}
|
|
title={field.fieldName}
|
|
items={field.values}
|
|
icon={
|
|
<Image
|
|
src={field.icon || '/assets/icons/home-icon.svg'}
|
|
alt={field.fieldName}
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|