43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { memo } from "react";
|
|
import { Card } from "@/components/ui/card";
|
|
import type { LucideProps } from "lucide-react";
|
|
import type { ForwardRefExoticComponent, RefAttributes } from "react";
|
|
|
|
type LucideIcon = ForwardRefExoticComponent<Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>>;
|
|
|
|
interface KPICardProps {
|
|
title: string;
|
|
value: string | number;
|
|
icon: LucideIcon;
|
|
trend?: string;
|
|
trendColor?: "success" | "danger" | "default";
|
|
}
|
|
|
|
const getTrendColorClass = (trendColor: "success" | "danger" | "default"): string => {
|
|
switch (trendColor) {
|
|
case "success":
|
|
return "text-success";
|
|
case "danger":
|
|
return "text-danger";
|
|
default:
|
|
return "text-muted-foreground";
|
|
}
|
|
};
|
|
|
|
export const KPICard = memo(({ title, value, icon: Icon, trend, trendColor = "default" }: KPICardProps) => {
|
|
return (
|
|
<Card className="p-4 hover:shadow-lg transition-shadow">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="p-2 bg-primary/10 rounded-lg">
|
|
<Icon className="h-5 w-5 text-primary" />
|
|
</div>
|
|
<h3 className="text-sm font-medium text-muted-foreground">{title}</h3>
|
|
</div>
|
|
<p className="text-2xl font-bold text-foreground mb-1">{value}</p>
|
|
{trend && <p className={`text-xs ${getTrendColorClass(trendColor)}`}>{trend}</p>}
|
|
</Card>
|
|
);
|
|
});
|
|
|
|
KPICard.displayName = 'KPICard';
|