rootadmin/multisite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wrapper

Browse source
This commit is contained in:
Mackie 2026-06-05 16:40:40 +08:00
parent 896cfd548f
commit 97422f8bd7
1 changed files with 13 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/blocks/StatsStrip/Component.tsx
View file

@ -2,30 +2,20 @@ export function StatsStripBlock({ stats }: StatsStripProps) {
if (!Array.isArray(stats) || stats.length === 0) return null if (!Array.isArray(stats) || stats.length === 0) return null
return ( 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"> <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"> <div className="bg-muted/50 border border-foreground/8 rounded-xl overflow-hidden">
{stats.map((stat, i) => ( <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-y md:divide-y-0 divide-foreground/10">
<div {stats.map((stat, i) => (
key={i} <div key={i} className="px-6 py-10 flex flex-col items-center text-center">
className={` <p className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">
px-6 py-10 flex flex-col items-center text-center {stat.value}
/* Desktop: Vertical borders between items, but not on the last one */ </p>
${i < stats.length - 1 ? 'md:border-r md:border-foreground/10' : ''} <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-foreground/40 mt-3">
/* Mobile: Checkerboard border logic */ {stat.label}
${i % 2 === 0 ? 'border-r border-foreground/10' : ''} </p>
${i < 2 ? 'border-b border-foreground/10' : ''} </div>
md:border-b-0 ))}
`} </div>
>
<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> </div>
</section> </section>
) )