60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
'use client'
|
|
import React from 'react'
|
|
|
|
export interface StatsProps {
|
|
title?: string | null
|
|
subtitle?: string | null
|
|
items?: Array<{
|
|
id?: string | null
|
|
stat: string
|
|
label: string
|
|
description?: string | null
|
|
}> | null
|
|
}
|
|
|
|
export const StatsBlock: React.FC<StatsProps> = ({ title, subtitle, items }) => {
|
|
if (!items || items.length === 0) return null
|
|
|
|
return (
|
|
<section className="py-20 md:py-32 bg-background border-y border-border">
|
|
<div className="container-premium">
|
|
{(title || subtitle) && (
|
|
<div className="max-w-2xl mb-16">
|
|
{title && (
|
|
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground mb-4 tracking-tight">
|
|
{title}
|
|
</h2>
|
|
)}
|
|
{subtitle && (
|
|
<p className="text-foreground/70 text-lg sm:text-xl leading-relaxed font-light">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 border-t border-l border-border mt-12">
|
|
{items.map((item, index) => (
|
|
<div
|
|
key={item.id || index}
|
|
className="flex flex-col p-8 sm:p-12 border-b border-r border-border hover:bg-foreground/[0.02] transition-colors"
|
|
>
|
|
<div className="font-heading text-5xl lg:text-7xl font-extrabold text-accent mb-4 tracking-tighter">
|
|
{item.stat}
|
|
</div>
|
|
<div className="font-heading text-xl font-bold text-foreground mb-2">
|
|
{item.label}
|
|
</div>
|
|
{item.description && (
|
|
<p className="text-base text-foreground/70 leading-relaxed font-light">
|
|
{item.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|