refactor: refactor the color schema

src/components/dashboard/stats-card.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { LucideIcon } from "lucide-react"
+
+interface StatsCardProps {
+    title: string
+    subtitle?: string
+    value: number | string
+    icon: LucideIcon
+    isLoading?: boolean
+}
+
+export function StatsCard({
+    title,
+    subtitle,
+    value,
+    icon: Icon,
+    isLoading = false
+}: StatsCardProps) {
+    return (
+        <Card className="py-6 px-6">
+            <CardContent className="p-0 flex items-center justify-between gap-6">
+                <div className="flex flex-col gap-1 min-w-0">
+                    <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
+                        {title}
+                    </h3>
+                    <div className="flex flex-col">
+                        {isLoading ? (
+                            <div className="h-10 w-24 bg-muted rounded-md mt-2 animate-pulse" />
+                        ) : (
+                            <>
+                                <p className="text-3xl font-bold">
+                                    {value}
+                                </p>
+                                {subtitle && (
+                                    <p className="text-xs text-muted-foreground mt-1">
+                                        {subtitle}
+                                    </p>
+                                )}
+                            </>
+                        )}
+                    </div>
+                </div>
+
+                <div className="p-3 rounded-md bg-secondary text-secondary-foreground">
+                    <Icon className="h-6 w-6" />
+                </div>
+            </CardContent>
+        </Card>
+    )
+}