Upload components/StatCard.jsx with huggingface_hub

components/StatCard.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { TrendingUp, TrendingDown } from 'lucide-react';
+
+export default function StatCard({ title, value, change, positive, icon }) {
+  return (
+    <div className="card p-6 transition-transform hover:-translate-y-1 duration-300">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+            {title}
+          </p>
+          <p className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">
+            {value}
+          </p>
+          <div className="mt-2 flex items-center text-sm">
+            {positive ? (
+              <span className="flex items-center text-green-600 font-medium">
+                <TrendingUp className="w-4 h-4 mr-1" />
+                {change}
+              </span>
+            ) : (
+              <span className="flex items-center text-red-600 font-medium">
+                <TrendingDown className="w-4 h-4 mr-1" />
+                {change}
+              </span>
+            )}
+            <span className="ml-2 text-gray-500 dark:text-gray-400">
+              vs last month
+            </span>
+          </div>
+        </div>
+        <div className="p-3 bg-gray-50 rounded-full dark:bg-gray-700/50">
+          {icon}
+        </div>
+      </div>
+    </div>
+  );
+}