38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import Link from "next/link";
|
|
|
|
interface StatsCardProps {
|
|
icon: string;
|
|
value: string | number;
|
|
label: string;
|
|
color?: string;
|
|
href?: string;
|
|
title?: string;
|
|
}
|
|
|
|
export default function StatsCard({ icon, value, label, color = "#00285d", href, title }: StatsCardProps) {
|
|
const card = (
|
|
<div className={`stats-card ${href ? "stats-card-link" : ""}`} title={title ?? (href ? `Ver tickets: ${label}` : undefined)}>
|
|
<div className="d-flex align-items-center gap-3">
|
|
<div className="stats-icon" style={{ backgroundColor: `${color}15`, color }}>
|
|
<i className={`bi ${icon}`}></i>
|
|
</div>
|
|
<div>
|
|
<div className="stats-value">{value}</div>
|
|
<div className="stats-label">
|
|
{label}
|
|
{href && <i className="bi bi-arrow-right-circle ms-1" aria-hidden></i>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
if (href) {
|
|
return (
|
|
<Link href={href} className="text-decoration-none stats-card-anchor">
|
|
{card}
|
|
</Link>
|
|
);
|
|
}
|
|
return card;
|
|
}
|