71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import { ArrowDownRight, ArrowUpRight } from "lucide-react";
|
|
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatPrice = (value: number) =>
|
|
`${value.toLocaleString("fa-IR")} ریال`;
|
|
|
|
const formatChangeBadge = (value: number) =>
|
|
`${new Intl.NumberFormat("fa-IR", {
|
|
minimumFractionDigits: 1,
|
|
maximumFractionDigits: 1,
|
|
}).format(Math.abs(value))}٪`;
|
|
|
|
interface StatsCard10Props {
|
|
title?: string;
|
|
value?: string;
|
|
change?: number;
|
|
period?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const StatsCard10 = ({
|
|
title = "فروش کل",
|
|
value = formatPrice(23456000),
|
|
change = 12.5,
|
|
period = "نسبت به هفته قبل",
|
|
className,
|
|
}: StatsCard10Props) => {
|
|
const isPositive = change >= 0;
|
|
|
|
return (
|
|
<Card
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"w-full max-w-xs border-s-4",
|
|
isPositive ? "border-s-green-500" : "border-s-red-500",
|
|
className,
|
|
)}
|
|
>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">{title}</p>
|
|
<p className="mt-1 text-3xl font-bold">{value}</p>
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"flex items-center gap-1 rounded-full px-2 py-1 text-sm font-medium",
|
|
isPositive
|
|
? "bg-green-500/10 text-green-600"
|
|
: "bg-red-500/10 text-red-600",
|
|
)}
|
|
>
|
|
{isPositive ? (
|
|
<ArrowUpRight className="size-4" />
|
|
) : (
|
|
<ArrowDownRight className="size-4" />
|
|
)}
|
|
{formatChangeBadge(change)}
|
|
</div>
|
|
</div>
|
|
<p className="mt-2 text-sm text-muted-foreground">{period}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { StatsCard10 };
|