42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import FeatureCard from '@/components/site/feature-card';
|
|
import { common } from '@/content/common';
|
|
import { useContent } from '@/hooks/use-locale';
|
|
|
|
type ServiceGridProps = {
|
|
/** `summary` for overviews, `description` for the official wording. */
|
|
detail?: 'summary' | 'description';
|
|
};
|
|
|
|
/** The eight official PAJ services as a 4-column card grid. */
|
|
export default function ServiceGrid({ detail = 'summary' }: ServiceGridProps) {
|
|
const t = useContent(common);
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
|
|
{t.services.map((service, index) => {
|
|
const number = String(index + 1).padStart(2, '0');
|
|
|
|
return (
|
|
<FeatureCard
|
|
key={service.title}
|
|
icon={service.icon}
|
|
tag={`${number} / ${t.serviceTag}`}
|
|
title={`${index + 1}. ${service.title}`}
|
|
description={
|
|
<>
|
|
{service.expansion && (
|
|
<span className="text-on-surface font-semibold">
|
|
{service.expansion}:{' '}
|
|
</span>
|
|
)}
|
|
{service[detail]}
|
|
</>
|
|
}
|
|
footer={service.outcome}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|