Jean-Luc Makiola
9bcdcc7168
Switch all interactive UI elements (buttons, focus rings, active tabs, FAB, links, spinners) from blue to gray to match icon colors for a more cohesive look. Mute card badge text colors to pastels (blue-400, green-500, purple-500) to keep the focus on card content. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
import { LucideIcon } from "../lib/iconData";
|
|
|
|
interface DashboardCardProps {
|
|
to: string;
|
|
search?: Record<string, string>;
|
|
title: string;
|
|
icon: string;
|
|
stats: Array<{ label: string; value: string }>;
|
|
emptyText?: string;
|
|
}
|
|
|
|
export function DashboardCard({
|
|
to,
|
|
search,
|
|
title,
|
|
icon,
|
|
stats,
|
|
emptyText,
|
|
}: DashboardCardProps) {
|
|
const allZero = stats.every(
|
|
(s) => s.value === "0" || s.value === "$0.00" || s.value === "0g",
|
|
);
|
|
|
|
return (
|
|
<Link
|
|
to={to}
|
|
search={search}
|
|
className="block bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-md transition-all p-6"
|
|
>
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<LucideIcon name={icon} size={24} className="text-gray-500" />
|
|
<h2 className="text-lg font-semibold text-gray-900">{title}</h2>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
{stats.map((stat) => (
|
|
<div key={stat.label} className="flex items-center justify-between">
|
|
<span className="text-sm text-gray-500">{stat.label}</span>
|
|
<span className="text-sm font-medium text-gray-700">
|
|
{stat.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{allZero && emptyText && (
|
|
<p className="mt-4 text-sm text-gray-500 font-medium">{emptyText}</p>
|
|
)}
|
|
</Link>
|
|
);
|
|
}
|