48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import type { LucideIcon } from "lucide-react";
|
|
import type { ReactNode } from "react";
|
|
|
|
import { AppCard } from "@/components/ui/app-card";
|
|
import { CardContent } from "@/components/ui/card";
|
|
|
|
type StatsCardProps = {
|
|
title: string;
|
|
value: string;
|
|
icon?: LucideIcon;
|
|
description?: string;
|
|
footer?: ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
export function StatsCard({
|
|
title,
|
|
value,
|
|
icon: Icon,
|
|
description,
|
|
footer,
|
|
className,
|
|
}: StatsCardProps) {
|
|
return (
|
|
<AppCard level={3} layer="single" className={className}>
|
|
<CardContent className="p-3">
|
|
<div className="flex items-center gap-3">
|
|
{Icon ? (
|
|
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-nested border border-border bg-muted/50 text-muted-foreground">
|
|
<Icon className="h-4 w-4" />
|
|
</div>
|
|
) : null}
|
|
<div className="min-w-0">
|
|
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">{title}</p>
|
|
<p className="mt-1 text-lg font-semibold text-foreground">{value}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{description ? (
|
|
<p className="mt-2 text-sm text-muted-foreground">{description}</p>
|
|
) : null}
|
|
|
|
{footer ? <div className="mt-2">{footer}</div> : null}
|
|
</CardContent>
|
|
</AppCard>
|
|
);
|
|
}
|