81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Image from "next/image";
|
||
|
|
import { useApp } from "@/contexts/AppContext";
|
||
|
|
|
||
|
|
export default function GeographicAllocation() {
|
||
|
|
const { t } = useApp();
|
||
|
|
|
||
|
|
const regions = [
|
||
|
|
{
|
||
|
|
countryKey: "transparency.unitedStates",
|
||
|
|
regionKey: "transparency.northAmerica",
|
||
|
|
value: "$305,000,000",
|
||
|
|
percentage: "65.6%",
|
||
|
|
flag: "/lr0.svg",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
countryKey: "transparency.hongKong",
|
||
|
|
regionKey: "transparency.asiaPacific",
|
||
|
|
value: "$160,000,000",
|
||
|
|
percentage: "34.4%",
|
||
|
|
flag: "/container14.svg",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex-1 bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6 flex flex-col gap-6">
|
||
|
|
{/* Header */}
|
||
|
|
<div className="flex flex-col gap-0">
|
||
|
|
<h3 className="text-[20px] font-bold text-text-primary dark:text-white leading-[140%]">
|
||
|
|
{t("transparency.geographicAllocation")}
|
||
|
|
</h3>
|
||
|
|
<p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
||
|
|
{t("transparency.geographicSubtitle")}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Region Cards */}
|
||
|
|
<div className="flex flex-col gap-4">
|
||
|
|
{regions.map((region, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="bg-bg-subtle dark:bg-gray-700 rounded-2xl border border-border-gray dark:border-gray-600 p-4 flex items-center justify-between"
|
||
|
|
>
|
||
|
|
{/* Left - Flag and Location */}
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="w-12 h-12 flex-shrink-0 flex items-center justify-center">
|
||
|
|
<Image
|
||
|
|
src={region.flag}
|
||
|
|
alt={t(region.countryKey)}
|
||
|
|
width={48}
|
||
|
|
height={48}
|
||
|
|
className="w-full h-full object-contain"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
|
||
|
|
{t(region.countryKey)}
|
||
|
|
</span>
|
||
|
|
<span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
||
|
|
{t(region.regionKey)}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Right - Value and Percentage */}
|
||
|
|
<div className="flex flex-col items-end">
|
||
|
|
<span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
|
||
|
|
{region.value}
|
||
|
|
</span>
|
||
|
|
<span className="text-caption-tiny font-medium text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
||
|
|
{region.percentage}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|