39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import FeatureCard from '@/components/site/feature-card';
|
|
import { officialServices } from '@/data/site';
|
|
|
|
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) {
|
|
return (
|
|
<div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
|
|
{officialServices.map((service, index) => {
|
|
const number = String(index + 1).padStart(2, '0');
|
|
|
|
return (
|
|
<FeatureCard
|
|
key={service.title}
|
|
icon={service.icon}
|
|
tag={`${number} / JASA RESMI`}
|
|
title={`${index + 1}. ${service.title}`}
|
|
description={
|
|
<>
|
|
{service.expansion && (
|
|
<span className="text-on-surface font-semibold">
|
|
{service.expansion}:{' '}
|
|
</span>
|
|
)}
|
|
{service[detail]}
|
|
</>
|
|
}
|
|
footer={service.outcome}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|