64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatPrice = (value: number) =>
|
|
`${value.toLocaleString("fa-IR")} ریال`;
|
|
|
|
interface StatsCard9Props {
|
|
title?: string;
|
|
monthlyValue?: string;
|
|
annualValue?: string;
|
|
monthlyLabel?: string;
|
|
annualLabel?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const StatsCard9 = ({
|
|
title = "درآمد تکرارشونده",
|
|
monthlyValue = formatPrice(12450000),
|
|
annualValue = formatPrice(149400000),
|
|
monthlyLabel = "MRR — درآمد ماهانه تکرارشونده",
|
|
annualLabel = "ARR — درآمد سالانه تکرارشونده",
|
|
className,
|
|
}: StatsCard9Props) => {
|
|
const [period, setPeriod] = useState<"monthly" | "annual">("monthly");
|
|
|
|
return (
|
|
<Card dir="rtl" lang="fa" className={cn("w-full max-w-xs", className)}>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
{title}
|
|
</CardTitle>
|
|
<Tabs
|
|
value={period}
|
|
onValueChange={(v) => setPeriod(v as "monthly" | "annual")}
|
|
>
|
|
<TabsList className="h-7">
|
|
<TabsTrigger value="monthly" className="px-2 text-xs">
|
|
ماهانه
|
|
</TabsTrigger>
|
|
<TabsTrigger value="annual" className="px-2 text-xs">
|
|
سالانه
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-3xl font-bold">
|
|
{period === "monthly" ? monthlyValue : annualValue}
|
|
</div>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{period === "monthly" ? monthlyLabel : annualLabel}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { StatsCard9 };
|