54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
"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>
|
|
)
|
|
}
|