78 lines
2.9 KiB
TypeScript
78 lines
2.9 KiB
TypeScript
import React, { type ReactNode } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
|
|
import { Skeleton } from "./ui/skeleton";
|
|
import { type LucideIcon, ChevronRight } from "lucide-react";
|
|
import { cn } from "../lib/utils";
|
|
|
|
interface StatCardProps {
|
|
title: string;
|
|
value: ReactNode;
|
|
subtitle?: ReactNode;
|
|
icon: LucideIcon;
|
|
isLoading?: boolean;
|
|
className?: string;
|
|
valueClassName?: string;
|
|
iconClassName?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function StatCard({
|
|
title,
|
|
value,
|
|
subtitle,
|
|
icon: Icon,
|
|
isLoading = false,
|
|
className,
|
|
valueClassName,
|
|
iconClassName,
|
|
onClick,
|
|
}: StatCardProps) {
|
|
return (
|
|
<Card
|
|
className={cn(
|
|
"glass-card border-none bg-card/40 hover-glow group transition-all duration-300",
|
|
onClick && "cursor-pointer hover:bg-card/60 hover:scale-[1.02] active:scale-[0.98]",
|
|
className
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative overflow-hidden">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors">
|
|
{title}
|
|
</CardTitle>
|
|
<div className="flex items-center gap-2">
|
|
{onClick && (
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-primary opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 flex items-center gap-1">
|
|
Manage <ChevronRight className="w-3 h-3" />
|
|
</span>
|
|
)}
|
|
<div className="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center ring-1 ring-primary/20">
|
|
<Icon className={cn(
|
|
"h-4 w-4 transition-all duration-300 text-primary",
|
|
onClick && "group-hover:scale-110",
|
|
iconClassName
|
|
)} />
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-8 w-[60px]" />
|
|
<Skeleton className="h-3 w-[100px]" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className={cn("text-2xl font-bold", valueClassName)}>{value}</div>
|
|
{subtitle && (
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card >
|
|
);
|
|
}
|