add first files

2026-04-30 14:59:57 -04:00
parent 2b97c1a04a
commit 695a7f7cc7
92 changed files with 4873 additions and 0 deletions
@@ -0,0 +1,49 @@
+import { LucideIcon } from 'lucide-react'
+
+interface StatCardProps {
+  title: string
+  value: string | number
+  change?: number
+  icon: LucideIcon
+  iconColor?: string
+  iconBg?: string
+}
+
+export default function StatCard({
+  title,
+  value,
+  change,
+  icon: Icon,
+  iconColor = 'text-blue-600',
+  iconBg = 'bg-blue-50',
+}: StatCardProps) {
+  const isPositive = change !== undefined && change >= 0
+  const isNegative = change !== undefined && change < 0
+
+  return (
+    <div className="card p-6">
+      <div className="flex items-start justify-between">
+        <div>
+          <p className="text-sm text-slate-500 font-medium">{title}</p>
+          <p className="text-2xl font-bold text-slate-900 mt-1">{value}</p>
+          {change !== undefined && (
+            <div className="flex items-center gap-1 mt-2">
+              <span
+                className={[
+                  'text-xs font-medium',
+                  isPositive ? 'text-green-600' : isNegative ? 'text-red-600' : 'text-slate-500',
+                ].join(' ')}
+              >
+                {isPositive ? '+' : ''}{change.toFixed(1)}%
+              </span>
+              <span className="text-xs text-slate-400">vs last month</span>
+            </div>
+          )}
+        </div>
+        <div className={`w-12 h-12 rounded-xl ${iconBg} flex items-center justify-center flex-shrink-0`}>
+          <Icon className={`w-6 h-6 ${iconColor}`} />
+        </div>
+      </div>
+    </div>
+  )
+}