45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import React from "react";
|
|
|
|
interface Metric {
|
|
label: string;
|
|
value: string;
|
|
}
|
|
|
|
interface MetricsBarProps {
|
|
metrics: Metric[];
|
|
}
|
|
|
|
const MetricsBar: React.FC<MetricsBarProps> = ({ metrics }) => {
|
|
const accentColors = [
|
|
"from-[var(--color-primary)] to-[var(--color-primary-dark)]",
|
|
"from-[var(--color-success)] to-[var(--color-success-dark)]",
|
|
"from-[var(--color-warning)] to-[var(--color-warning-dark)]",
|
|
];
|
|
|
|
return (
|
|
<div className="max-w-5xl mx-auto -mt-12 sm:-mt-16 px-6">
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 shadow-xl p-6 backdrop-blur-sm">
|
|
{metrics.map((metric, index) => {
|
|
const gradient = accentColors[index % accentColors.length];
|
|
return (
|
|
<div key={metric.label} className="text-center sm:text-left relative">
|
|
<div className={`absolute left-0 top-0 w-1 h-full bg-gradient-to-b ${gradient} rounded-full`} />
|
|
<div className="pl-4">
|
|
<div className={`text-3xl font-semibold bg-gradient-to-r ${gradient} bg-clip-text text-transparent`}>
|
|
{metric.value}
|
|
</div>
|
|
<div className="text-sm uppercase tracking-[0.2em] text-slate-500 mt-2">
|
|
{metric.label}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MetricsBar;
|
|
|