108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { LucideIcon } from "lucide-react"
|
|
|
|
interface GradientStatsCardProps {
|
|
title: string
|
|
subtitle?: string
|
|
value: number | string
|
|
icon: LucideIcon
|
|
gradient: "green" | "coral" | "blue" | "purple" | "orange" | "indigo" | "emerald"
|
|
isLoading?: boolean
|
|
}
|
|
|
|
const gradientStyles = {
|
|
green: {
|
|
background: "bg-card",
|
|
border: "border-l-4 border-l-[var(--border)]",
|
|
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
|
|
|
|
},
|
|
coral: {
|
|
background: "bg-card",
|
|
border: "border-l-4 border-l-[var(--border)]",
|
|
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
|
|
|
|
},
|
|
blue: {
|
|
background: "bg-card",
|
|
border: "border-l-4 border-l-[var(--border)]",
|
|
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
|
|
|
|
},
|
|
purple: {
|
|
background: "bg-card",
|
|
border: "border-l-4 border-l-[var(--border)]",
|
|
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
|
|
|
|
},
|
|
orange: {
|
|
background: "bg-card",
|
|
border: "border-l-4 border-l-[var(--border)]",
|
|
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
|
|
|
|
},
|
|
indigo: {
|
|
background: "bg-card",
|
|
border: "border-l-4 border-l-[var(--border)]",
|
|
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
|
|
|
|
},
|
|
emerald: {
|
|
background: "bg-card",
|
|
border: "border-l-4 border-l-[var(--border)]",
|
|
iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
|
|
|
|
}
|
|
}
|
|
|
|
export function GradientStatsCard({
|
|
title,
|
|
subtitle,
|
|
value,
|
|
icon: Icon,
|
|
gradient,
|
|
isLoading = false
|
|
}: GradientStatsCardProps) {
|
|
const styles = gradientStyles[gradient]
|
|
|
|
return (
|
|
<Card className="bg-white/60 backdrop-blur-lg border-none shadow-none hover:shadow-none overflow-hidden py-8 px-6">
|
|
<CardContent className="p-0 flex items-center justify-between gap-6">
|
|
<div className="flex flex-col gap-1 min-w-0">
|
|
<h3 className="text-sm font-bold text-blue-600/70 dark:text-blue-400/70 uppercase tracking-widest">
|
|
{title}
|
|
</h3>
|
|
<div className="flex flex-col">
|
|
{isLoading ? (
|
|
<div className="h-14 w-24 bg-gray-100 dark:bg-gray-800 rounded-xl mt-2" />
|
|
) : (
|
|
<>
|
|
<p className="text-4xl font-bold heading-blue-gradient">
|
|
{value}
|
|
</p>
|
|
{subtitle && (
|
|
<p className="text-xs font-medium text-gray-500 mt-1">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
background: "linear-gradient(180deg, #225999 0%, #56A5FF 100%)",
|
|
}}
|
|
className={`
|
|
w-16 h-16 self-start rounded-lg flex items-center justify-center
|
|
`}>
|
|
<Icon className="h-10 w-10 text-white" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|