124 lines
4.0 KiB
TypeScript
124 lines
4.0 KiB
TypeScript
"use client";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
// import world from "./world-map.json";
|
|
import { useState } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
const sales = [
|
|
{
|
|
title: "Nevada",
|
|
amount: "$125k",
|
|
cls: "bg-primary/70 ring-primary/30",
|
|
},
|
|
{
|
|
title: "Colorado",
|
|
amount: "$325k",
|
|
cls: "bg-success/70 ring-success/30",
|
|
},
|
|
{
|
|
title: "Iowa",
|
|
amount: "$67",
|
|
cls: "bg-info/70 ring-info/30",
|
|
},
|
|
{
|
|
title: "Arkansas",
|
|
amount: "$354k",
|
|
cls: "bg-warning/70 ring-warning/30",
|
|
},
|
|
{
|
|
title: "Wyoming",
|
|
amount: "$195k",
|
|
cls: "bg-success/70 ring-success/30",
|
|
},
|
|
{
|
|
title: "Other countries",
|
|
amount: "$295k",
|
|
cls: "bg-secondary/70 ring-secondary/30",
|
|
},
|
|
];
|
|
|
|
const MostSales = () => {
|
|
const [filterMap, setFilterMap] = useState("usa");
|
|
const t = useTranslations("AnalyticsDashboard");
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center">
|
|
<CardTitle className="flex-1"> {t("most_sales_map_title", { defaultValue: "Most Sales Map Title" })}</CardTitle>
|
|
<div className="border border-default-200 dark:border-default-300 rounded p-1 flex items-center bg-background">
|
|
<span
|
|
className={cn(
|
|
"flex-1 text-sm font-normal px-3 py-1 transition-all duration-150 rounded cursor-pointer",
|
|
{
|
|
"bg-default-900 text-primary-foreground dark:bg-default-300 dark:text-foreground ":
|
|
filterMap === "global",
|
|
}
|
|
)}
|
|
onClick={() => setFilterMap("global")}
|
|
>
|
|
{t("total_earning_map_button_1", { defaultValue: "Total Earning Map Button 1" })}
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"flex-1 text-sm font-normal px-3 py-1 transition-all duration-150 rounded cursor-pointer",
|
|
{
|
|
"bg-default-900 text-primary-foreground dark:bg-default-300 dark:text-foreground ":
|
|
filterMap === "usa",
|
|
}
|
|
)}
|
|
onClick={() => setFilterMap("usa")}
|
|
>
|
|
USA
|
|
</span>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="md:flex items-center">
|
|
<div className="flex-none">
|
|
<h4 className="text-default-600 text-sm font-normal mb-1.5">
|
|
{t("total_earning_map_desc", { defaultValue: "Total Earning Map Desc" })}
|
|
</h4>
|
|
{filterMap === "usa" && (
|
|
<div className="text-lg font-medium mb-1.5 text-default-900">
|
|
$12,65,64787.00
|
|
</div>
|
|
)}
|
|
{filterMap === "global" && (
|
|
<div className="text-lg font-medium mb-1.5 text-default-900">
|
|
$12,65.00
|
|
</div>
|
|
)}
|
|
<div className="text-xs font-light">
|
|
<span className="text-primary">+08%</span>{" "}
|
|
{t("total_earning_map_desc_2", { defaultValue: "Total Earning Map Desc 2" })}
|
|
</div>
|
|
<ul className="bg-default-50 rounded p-4 min-w-[184px] space-y-5 mt-4">
|
|
{sales.map((item, i) => (
|
|
<li
|
|
key={i}
|
|
className="flex justify-between text-xs text-default-600"
|
|
>
|
|
<span className="flex gap-2 items-center">
|
|
<span
|
|
className={` inline-flex h-1.5 w-1.5 bg-primary-500 ring-opacity-25 rounded-full ring-4
|
|
${item.cls}
|
|
`}
|
|
></span>
|
|
<span>{item.title}</span>
|
|
</span>
|
|
<span>{item.amount}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="flex-1 ">
|
|
{/* <VectorMap {...world} className="dashcode-app-vmap" /> */}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default MostSales;
|