117 lines
3.8 KiB
TypeScript
117 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useApp } from "@/contexts/AppContext";
|
|
|
|
interface OverviewItemProps {
|
|
icon: string;
|
|
label: string;
|
|
value: string;
|
|
}
|
|
|
|
function OverviewItem({ icon, label, value }: OverviewItemProps) {
|
|
return (
|
|
<div className="flex items-center justify-between w-full">
|
|
<div className="flex items-center gap-1">
|
|
<div className="w-5 h-6 flex-shrink-0">
|
|
<Image src={icon} alt={label} width={20} height={24} />
|
|
</div>
|
|
<span className="text-body-small font-medium text-text-tertiary dark:text-gray-400">
|
|
{label}
|
|
</span>
|
|
</div>
|
|
<span className="text-body-small font-medium text-text-primary dark:text-white">
|
|
{value}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function AssetOverviewCard() {
|
|
const { t } = useApp();
|
|
|
|
return (
|
|
<div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-body-large font-bold text-text-primary dark:text-white">
|
|
{t("assetOverview.title")}
|
|
</h3>
|
|
<div
|
|
className="rounded-full border flex items-center gap-2 px-3 py-1.5"
|
|
style={{
|
|
backgroundColor: "#fffbf5",
|
|
borderColor: "#ffedd5",
|
|
}}
|
|
>
|
|
<div
|
|
className="w-1.5 h-1.5 rounded-full flex-shrink-0"
|
|
style={{ backgroundColor: "#ffb933" }}
|
|
/>
|
|
<span
|
|
className="text-xs font-semibold leading-4"
|
|
style={{ color: "#ffb933" }}
|
|
>
|
|
{t("assetOverview.mediumRisk")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Overview Items */}
|
|
<div className="flex gap-12 w-full">
|
|
<div className="flex-1 flex flex-col gap-5">
|
|
<OverviewItem
|
|
icon="/component-11.svg"
|
|
label={t("assetOverview.underlyingAssets")}
|
|
value={t("assetOverview.usEquityIndex")}
|
|
/>
|
|
<OverviewItem
|
|
icon="/component-12.svg"
|
|
label={t("assetOverview.maturityRange")}
|
|
value="05 Feb 2026"
|
|
/>
|
|
<OverviewItem
|
|
icon="/component-13.svg"
|
|
label={t("assetOverview.cap")}
|
|
value="$50,000,000"
|
|
/>
|
|
</div>
|
|
<div className="flex-1 flex flex-col gap-5">
|
|
<OverviewItem
|
|
icon="/component-14.svg"
|
|
label={t("assetOverview.minInvestment")}
|
|
value="100 USDC"
|
|
/>
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<OverviewItem
|
|
icon="/component-15.svg"
|
|
label={t("assetOverview.poolCapacity")}
|
|
value="75%"
|
|
/>
|
|
<div className="w-full h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
|
|
<div className="h-full bg-blue-500 rounded-full" style={{ width: "75%" }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<div className="border-t border-border-gray dark:border-gray-700" />
|
|
|
|
{/* Current Price */}
|
|
<div className="bg-bg-subtle dark:bg-gray-700 rounded-xl p-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Image src="/component-16.svg" alt="Price" width={24} height={24} />
|
|
<span className="text-body-small font-medium text-text-tertiary dark:text-gray-400">
|
|
{t("assetOverview.currentPrice")}
|
|
</span>
|
|
</div>
|
|
<div className="text-[20px] font-bold leading-[140%]">
|
|
<span className="text-text-primary dark:text-white">1 GY-US = </span>
|
|
<span style={{ color: "#10b981" }}>1.04 USDC</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|