Sluijsens
eac58ee6ba
Continuous Integration / config (pull_request) Successful in 9s
Continuous Integration / prepare (pull_request) Successful in 1m36s
Continuous Integration / build-production (pull_request) Skipped
Continuous Integration / build (pull_request) Successful in 2m6s
Continuous Integration / test (pull_request) Successful in 2m5s
Continuous Integration / deploy-production (pull_request) Skipped
Deploy / deploy (pull_request) Successful in 35s
Continuous Integration / deploy-test (pull_request) Successful in 36s
Toont 3 pulserende placeholder-kaarten (zelfde afmetingen/structuur als PackageCard) zolang de offerings-fetch nog bezig is, zodat de sectie niet leeg oogt en de layout niet verspringt zodra de echte data binnenkomt.
45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
import { usePackagesQuery } from '../hooks/usePackagesQuery';
|
|
import { PackageCard } from './PackageCard';
|
|
import { PackageCardSkeleton } from './PackageCardSkeleton';
|
|
|
|
// Matches the fixed number of packages (see content.ts) so the skeleton grid has the
|
|
// same shape as the loaded grid — no layout shift once the real cards arrive.
|
|
const SKELETON_COUNT = 3;
|
|
|
|
export function PackagesSection() {
|
|
const { data: packages, isLoading, isError } = usePackagesQuery();
|
|
|
|
return (
|
|
<section
|
|
id="pakketten"
|
|
className="bg-gradient-to-b from-transparent via-surface/50 to-transparent py-[88px]"
|
|
>
|
|
<div className="mx-auto max-w-[1080px] px-6">
|
|
<div className="mb-[52px]">
|
|
<span className="font-mono block text-sm uppercase tracking-wider text-accent">
|
|
// pakketten
|
|
</span>
|
|
<h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
|
|
Drie manieren om te starten
|
|
</h2>
|
|
<p className="mt-3 max-w-[56ch] text-muted">
|
|
Van één sterke pagina tot volledig maatwerk met eigen back-end. Elk pakket heeft een
|
|
vaste scope en een vaste prijs.
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-[22px] sm:grid-cols-3" data-testid="packages-grid">
|
|
{isError ? (
|
|
<p className="col-span-full text-center text-muted" data-testid="packages-error">
|
|
Pakketten konden niet worden geladen. Probeer het later opnieuw.
|
|
</p>
|
|
) : isLoading || !packages ? (
|
|
Array.from({ length: SKELETON_COUNT }, (_, i) => <PackageCardSkeleton key={i} />)
|
|
) : (
|
|
packages.map((pkg) => <PackageCard key={pkg.id} pkg={pkg} />)
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|