Integrated a from ai generated dashboard

components/StatCard/index.tsx

@@ -0,0 +1,40 @@
+import { ArrowDownRight, ArrowUpRight, LucideIcon, Minus } from "lucide-react";
+import React from "react";
+
+interface StatCardProps {
+  label: string;
+  value: string;
+  icon: LucideIcon;
+  trend?: "up" | "down" | "neutral";
+  change?: string;
+}
+
+const StatCard: React.FC<StatCardProps> = ({ label, value, icon: Icon, trend, change }) => {
+  return (
+    <div data-cmp="StatCard" className="bg-card border border-border rounded-xl p-6 shadow-sm">
+      <div className="flex items-center justify-between mb-4">
+        <span className="text-sm font-medium text-muted-foreground">{label}</span>
+        <div className="p-2 bg-muted rounded-full">
+          <Icon className="w-4 h-4 text-foreground" />
+        </div>
+      </div>
+      <div className="flex items-baseline space-x-2">
+        <h2 className="text-3xl font-bold text-foreground">{value}</h2>
+        {change && (
+          <span
+            className={`flex items-center text-xs font-medium ${
+              trend === "up" ? "text-green-600" : trend === "down" ? "text-red-500" : "text-muted-foreground"
+            }`}
+          >
+            {trend === "up" && <ArrowUpRight className="w-3 h-3 mr-1" />}
+            {trend === "down" && <ArrowDownRight className="w-3 h-3 mr-1" />}
+            {trend === "neutral" && <Minus className="w-3 h-3 mr-1" />}
+            {change}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default StatCard;