1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
import { Card, CardContent } from "@/components/ui/card";
import { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";
interface VendorResponseStatusCardProps {
title: string;
count: number;
icon: LucideIcon;
variant?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive";
}
const variantStyles = {
default: "border-gray-200 bg-gray-50/50",
primary: "border-blue-200 bg-blue-50/50",
secondary: "border-purple-200 bg-purple-50/50",
success: "border-green-200 bg-green-50/50",
warning: "border-yellow-200 bg-yellow-50/50",
destructive: "border-red-200 bg-red-50/50",
};
const iconStyles = {
default: "text-gray-600",
primary: "text-blue-600",
secondary: "text-purple-600",
success: "text-green-600",
warning: "text-yellow-600",
destructive: "text-red-600",
};
export function VendorResponseStatusCard({
title,
count,
icon: Icon,
variant = "default",
}: VendorResponseStatusCardProps) {
return (
<Card className={cn("border", variantStyles[variant])}>
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div className="space-y-1">
<p className="text-sm font-medium text-muted-foreground">{title}</p>
<p className="text-2xl font-bold">{count}</p>
</div>
<div className={cn("p-2 rounded-full bg-white/80", iconStyles[variant])}>
<Icon className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
);
}
|
