42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
|
|
interface Stat {
|
|
value: string;
|
|
label: string;
|
|
icon?: React.ReactNode;
|
|
}
|
|
|
|
interface StatsProps {
|
|
stats: Stat[];
|
|
}
|
|
|
|
export default function Stats({ stats }: StatsProps) {
|
|
return (
|
|
<div className="my-16 grid grid-cols-1 md:grid-cols-3 border border-neutral-200 rounded-2xl overflow-hidden shadow-sm">
|
|
{stats.map((stat, index) => (
|
|
<div
|
|
key={index}
|
|
className={`p-8 flex flex-col items-center text-center transition-all duration-500 hover:bg-neutral-50 group ${
|
|
index !== stats.length - 1 ? 'border-b md:border-b-0 md:border-r border-neutral-200' : ''
|
|
}`}
|
|
>
|
|
{stat.icon && (
|
|
<div className="text-primary mb-4 transform transition-transform group-hover:scale-110 duration-500">
|
|
{stat.icon}
|
|
</div>
|
|
)}
|
|
<div className="text-5xl font-bold text-text-primary mb-3 tracking-tight">
|
|
{stat.value}
|
|
</div>
|
|
<div className="text-xs font-bold text-text-secondary uppercase tracking-[0.2em]">
|
|
{stat.label}
|
|
</div>
|
|
|
|
{/* Industrial accent line */}
|
|
<div className="w-8 h-[2px] bg-primary/20 mt-6 transition-all group-hover:w-16 group-hover:bg-primary duration-500" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|