Initial commit

2026-06-17 13:51:22 +02:00
commit 4898bf7142
81 changed files with 12522 additions and 0 deletions
@@ -0,0 +1,53 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { cn } from "@/lib/utils"
+import { Card, CardContent } from "@/components/ui/card"
+import { LucideIcon } from "lucide-react"
+
+interface StatCardProps {
+  title: string
+  value: string | number
+  icon: LucideIcon
+  variant?: "default" | "blue" | "amber" | "purple" | "emerald" | "zinc"
+  description?: string
+  index?: number
+}
+
+const variantStyles = {
+  default: { bg: "bg-muted", text: "text-foreground" },
+  blue: { bg: "bg-blue-500/10", text: "text-blue-600 dark:text-blue-400" },
+  amber: { bg: "bg-amber-500/10", text: "text-amber-600 dark:text-amber-400" },
+  purple: { bg: "bg-purple-500/10", text: "text-purple-600 dark:text-purple-400" },
+  emerald: { bg: "bg-emerald-500/10", text: "text-emerald-600 dark:text-emerald-400" },
+  zinc: { bg: "bg-zinc-500/10", text: "text-zinc-600 dark:text-zinc-400" },
+}
+
+export function StatCard({ title, value, icon: Icon, variant = "default", description, index = 0 }: StatCardProps) {
+  const style = variantStyles[variant]
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, delay: index * 0.05 }}
+    >
+      <Card className="group hover:shadow-md transition-all duration-200">
+        <CardContent className="p-6">
+          <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-3xl font-bold tracking-tight">{value}</p>
+              {description && (
+                <p className="text-xs text-muted-foreground">{description}</p>
+              )}
+            </div>
+            <div className={cn("flex h-12 w-12 items-center justify-center rounded-xl", style.bg)}>
+              <Icon className={cn("h-6 w-6", style.text)} />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </motion.div>
+  )
+}