32 lines
1.3 KiB
TypeScript
32 lines
1.3 KiB
TypeScript
export function StatsStripBlock({ stats }: StatsStripProps) {
|
|
if (!Array.isArray(stats) || stats.length === 0) return null
|
|
|
|
return (
|
|
// Wrap in a container to match the max-width of your other blocks
|
|
<section className="w-full max-w-5xl mx-auto px-6 py-20 md:py-28">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 border-t border-b border-foreground/10">
|
|
{stats.map((stat, i) => (
|
|
<div
|
|
key={i}
|
|
className={`
|
|
px-6 py-10 flex flex-col items-center text-center
|
|
/* Desktop: Vertical borders between items, but not on the last one */
|
|
${i < stats.length - 1 ? 'md:border-r md:border-foreground/10' : ''}
|
|
/* Mobile: Checkerboard border logic */
|
|
${i % 2 === 0 ? 'border-r border-foreground/10' : ''}
|
|
${i < 2 ? 'border-b border-foreground/10' : ''}
|
|
md:border-b-0
|
|
`}
|
|
>
|
|
<p className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">
|
|
{stat.value}
|
|
</p>
|
|
<p className="text-[10px] font-bold uppercase tracking-[0.2em] text-foreground/40 mt-3">
|
|
{stat.label}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|