44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import { LucideIcon } from "lucide-react";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
|
|
type ColorKey = "primary" | "secondary" | "success" | "warning" | "blue" | "teal" | "green" | "orange" | "rose" | "violet";
|
|
|
|
interface StatCardProps {
|
|
title: string;
|
|
value: number | string;
|
|
icon: LucideIcon;
|
|
color: ColorKey;
|
|
}
|
|
|
|
const colorMap: Record<ColorKey, { bg: string; text: string }> = {
|
|
primary: { bg: "bg-primary bg-opacity-10", text: "text-primary" },
|
|
secondary: { bg: "bg-teal-500 bg-opacity-10", text: "text-teal-500" },
|
|
success: { bg: "bg-green-500 bg-opacity-10", text: "text-green-500" },
|
|
warning: { bg: "bg-orange-500 bg-opacity-10", text: "text-orange-500" },
|
|
blue: { bg: "bg-blue-100", text: "text-blue-600" },
|
|
teal: { bg: "bg-teal-100", text: "text-teal-600" },
|
|
green: { bg: "bg-green-100", text: "text-green-600" },
|
|
orange: { bg: "bg-orange-100", text: "text-orange-600" },
|
|
rose: { bg: "bg-rose-100", text: "text-rose-600" },
|
|
violet: { bg: "bg-violet-100", text: "text-violet-600" },
|
|
};
|
|
|
|
export function StatCard({ title, value, icon: Icon, color }: StatCardProps) {
|
|
const { bg, text } = colorMap[color] ?? colorMap.primary;
|
|
|
|
return (
|
|
<Card className="shadow-sm hover:shadow transition-shadow duration-200">
|
|
<CardContent className="p-4 flex items-center space-x-4">
|
|
<div className={`rounded-full p-3 ${bg} ${text}`}>
|
|
<Icon className="h-5 w-5" stroke="currentColor" />
|
|
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-600">{title}</p>
|
|
<h3 className="text-xl font-medium">{value}</h3>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|