48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { formatNumber } from "~/lib/utils";
|
|
import { BaseCard } from "./base-card";
|
|
|
|
interface MetricCardProps {
|
|
title: string;
|
|
value: string | number;
|
|
percentValue?: string | number;
|
|
valueLabel?: string;
|
|
percentLabel?: string;
|
|
}
|
|
|
|
export function MetricCard({
|
|
title,
|
|
value,
|
|
percentValue,
|
|
valueLabel = "میلیون ریال",
|
|
percentLabel = "درصد به کل",
|
|
}: MetricCardProps) {
|
|
return (
|
|
<BaseCard title={title}>
|
|
<div className="flex items-center justify-center flex-col">
|
|
<div className="flex items-center gap-4">
|
|
<div className="text-center">
|
|
<p className="text-3xl font-bold text-green-400">
|
|
{formatNumber(value)}
|
|
</p>
|
|
<div className="text-xs text-gray-400 font-persian">
|
|
{valueLabel}
|
|
</div>
|
|
</div>
|
|
{percentValue !== undefined && (
|
|
<>
|
|
<span className="text-5xl font-thin text-gray-600">/</span>
|
|
<div className="text-center">
|
|
<p className="text-3xl font-bold text-green-400">
|
|
{formatNumber(percentValue)}%
|
|
</p>
|
|
<div className="text-xs text-gray-400 font-persian">
|
|
{percentLabel}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</BaseCard>
|
|
);
|
|
} |