68 lines
2.8 KiB
TypeScript
68 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { ReactNode } from "react";
|
|
import { ArrowTrendingUpIcon as TrendingUpIcon, ArrowTrendingDownIcon as TrendingDownIcon } from "@heroicons/react/24/outline";
|
|
|
|
interface StatsCardProps {
|
|
title: string;
|
|
value: string | number;
|
|
icon: ReactNode;
|
|
trend?: {
|
|
value: string | number;
|
|
label: string;
|
|
type: "up" | "down" | "neutral";
|
|
};
|
|
description?: string;
|
|
}
|
|
|
|
export default function StatsCard({
|
|
title,
|
|
value,
|
|
icon,
|
|
trend,
|
|
description
|
|
}: StatsCardProps) {
|
|
return (
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6 transition-all group">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
|
{title}
|
|
</p>
|
|
<h3 className="mt-1 text-2xl font-bold text-zinc-900 dark:text-white group-hover:text-brand-500 transition-colors">
|
|
{value}
|
|
</h3>
|
|
|
|
{trend && (
|
|
<div className="mt-2 flex items-center gap-1.5">
|
|
<div className={`flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-bold ${trend.type === 'up'
|
|
? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-400'
|
|
: trend.type === 'down'
|
|
? 'bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400'
|
|
: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-400'
|
|
}`}>
|
|
{trend.type === 'up' && <TrendingUpIcon className="w-3 h-3" />}
|
|
{trend.type === 'down' && <TrendingDownIcon className="w-3 h-3" />}
|
|
{trend.value}
|
|
</div>
|
|
<span className="text-[10px] text-zinc-500 dark:text-zinc-500">
|
|
{trend.label}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{description && !trend && (
|
|
<p className="mt-2 text-xs text-zinc-500 dark:text-zinc-500">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-3 bg-zinc-50 dark:bg-zinc-800 rounded-xl text-zinc-500 dark:text-zinc-400 group-hover:bg-brand-50 dark:group-hover:bg-brand-900/10 group-hover:text-brand-500 transition-all">
|
|
{icon}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|