53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { LucideIcon } from "lucide-react"
|
|
|
|
interface StatsCardProps {
|
|
title: string
|
|
subtitle?: string
|
|
value: number | string
|
|
icon: LucideIcon
|
|
isLoading?: boolean
|
|
}
|
|
|
|
export function StatsCard({
|
|
title,
|
|
subtitle,
|
|
value,
|
|
icon: Icon,
|
|
isLoading = false
|
|
}: StatsCardProps) {
|
|
return (
|
|
<Card className="py-6 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-semibold text-muted-foreground uppercase tracking-wider">
|
|
{title}
|
|
</h3>
|
|
<div className="flex flex-col">
|
|
{isLoading ? (
|
|
<div className="h-10 w-24 bg-muted rounded-md mt-2 animate-pulse" />
|
|
) : (
|
|
<>
|
|
<p className="text-3xl font-bold">
|
|
{value}
|
|
</p>
|
|
{subtitle && (
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-3 rounded-md bg-secondary text-secondary-foreground">
|
|
<Icon className="h-6 w-6" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|