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

test

Browse source
This commit is contained in:
Mackie 2026-06-04 18:00:55 +08:00
parent 782174e331
commit dfa6534012
1 changed files with 12 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,35 +1,28 @@
import React from 'react'
type Stat = {
value: string
label: string
}
type StatsStripProps = {
stats?: Stat[]
}
export function StatsStripBlock({ stats }: StatsStripProps) { 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 (
// Applied consistent vertical spacing to match other page sections
<div className="py-20 md:py-28"> <div className="py-20 md:py-28">
<div className="grid grid-cols-2 md:grid-cols-4 border-t border-b border-foreground/10"> <div className="grid grid-cols-2 md:grid-cols-4 border-t border-b border-foreground/10">
{stats.map((stat, i) => ( {stats.map((stat, i) => (
<div <div
key={i} key={i}
className={` className={`
px-6 py-8 px-6 py-10 flex flex-col items-center text-center
/* Border logic: Maintain right divider for grid structure */ /* Desktop: Only show right border if it is NOT the last item */
${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 === 0 ? 'border-r border-foreground/10' : ''}
${i < 2 ? 'border-b md:border-b-0 border-foreground/10' : ''} ${i < 2 ? 'border-b border-foreground/10' : ''}
md:border-r md:border-foreground/10 md:border-b-0
${i === stats.length - 1 ? 'md:border-r-0' : ''}
`} `}
> >
<p className="text-3xl font-semibold text-foreground">{stat.value}</p> <p className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">
<p className="text-xs uppercase tracking-wider text-foreground/40 mt-2">{stat.label}</p> {stat.value}
</p>
<p className="text-[10px] font-bold uppercase tracking-[0.2em] text-foreground/40 mt-3">
{stat.label}
</p>
</div> </div>
))} ))}
</div> </div>