initial commit
This commit is contained in:
170
components/transparency/HoldingsTable.tsx
Normal file
170
components/transparency/HoldingsTable.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useApp } from "@/contexts/AppContext";
|
||||
|
||||
export default function HoldingsTable() {
|
||||
const { t } = useApp();
|
||||
|
||||
const holdings = [
|
||||
{
|
||||
custodian: t("transparency.morganStanley"),
|
||||
custodianType: t("transparency.primeBroker"),
|
||||
assetType: t("transparency.usEquityPortfolio"),
|
||||
maturityDate: "05 Feb 2026",
|
||||
daysRemaining: `77 ${t("transparency.days")}`,
|
||||
value: "$12,500,000.00",
|
||||
status: t("transparency.verified"),
|
||||
},
|
||||
{
|
||||
custodian: t("transparency.morganStanley"),
|
||||
custodianType: t("transparency.primeBroker"),
|
||||
assetType: t("transparency.usEquityPortfolio"),
|
||||
maturityDate: "05 Feb 2026",
|
||||
daysRemaining: `77 ${t("transparency.days")}`,
|
||||
value: "$12,500,000.00",
|
||||
status: t("transparency.verified"),
|
||||
},
|
||||
{
|
||||
custodian: t("transparency.morganStanley"),
|
||||
custodianType: t("transparency.primeBroker"),
|
||||
assetType: t("transparency.usEquityPortfolio"),
|
||||
maturityDate: "05 Feb 2026",
|
||||
daysRemaining: `77 ${t("transparency.days")}`,
|
||||
value: "$12,500,000.00",
|
||||
status: t("transparency.verified"),
|
||||
},
|
||||
{
|
||||
custodian: t("transparency.morganStanley"),
|
||||
custodianType: t("transparency.primeBroker"),
|
||||
assetType: t("transparency.usEquityPortfolio"),
|
||||
maturityDate: "05 Feb 2026",
|
||||
daysRemaining: `77 ${t("transparency.days")}`,
|
||||
value: "$12,500,000.00",
|
||||
status: t("transparency.verified"),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="bg-bg-surface dark:bg-gray-800 border-b border-border-gray dark:border-gray-700 px-6 py-6 flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h2 className="text-[20px] font-bold text-text-primary dark:text-white leading-[140%]">
|
||||
{t("transparency.rwaHoldings")}
|
||||
</h2>
|
||||
<p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
||||
{t("transparency.rwaSubtitle")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 rounded-full">
|
||||
<Image src="/component-10.svg" alt="" width={16} height={16} />
|
||||
<span className="text-caption-tiny font-regular text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
|
||||
{t("transparency.lastUpdated")}: 2 {t("transparency.minutesAgo")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-auto">
|
||||
{/* Table Header */}
|
||||
<div className="flex bg-bg-subtle dark:bg-gray-700 border-b border-border-gray dark:border-gray-600">
|
||||
<div className="flex-1 px-6 py-4">
|
||||
<span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
|
||||
{t("transparency.custodian")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 px-6 py-4">
|
||||
<span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
|
||||
{t("transparency.assetType")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 px-6 py-4">
|
||||
<span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
|
||||
{t("transparency.maturity")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 px-6 py-4">
|
||||
<span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
|
||||
{t("transparency.valueUsd")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 px-6 py-4">
|
||||
<span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
|
||||
{t("transparency.status")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table Body */}
|
||||
{holdings.map((holding, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center ${
|
||||
index !== holdings.length - 1
|
||||
? "border-b border-border-gray dark:border-gray-600"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{/* Custodian */}
|
||||
<div className="flex-1 px-6 py-6 flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-gradient-to-br from-[#ff8904] to-[#f54900] shadow-[0px_2.01px_3.02px_-2.01px_rgba(255,105,0,0.2)]">
|
||||
<span className="text-[10px] font-bold text-white leading-[14px] tracking-[-0.23px]">
|
||||
GY
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
|
||||
{holding.custodian}
|
||||
</span>
|
||||
<span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
||||
{holding.custodianType}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Asset Type */}
|
||||
<div className="flex-1 px-6 py-6">
|
||||
<span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
|
||||
{holding.assetType}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Maturity */}
|
||||
<div className="flex-1 px-6 py-6 flex flex-col">
|
||||
<span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
|
||||
{holding.maturityDate}
|
||||
</span>
|
||||
<span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
||||
({holding.daysRemaining})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Value */}
|
||||
<div className="flex-1 px-6 py-6">
|
||||
<span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
|
||||
{holding.value}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div className="flex-1 px-6 py-6">
|
||||
<div className="inline-flex items-center gap-0.5 bg-[#e1f8ec] dark:bg-green-900/30 border border-[#b8ecd2] dark:border-green-700 rounded-full px-3 py-1">
|
||||
<Image
|
||||
src="/component-11.svg"
|
||||
alt=""
|
||||
width={14}
|
||||
height={14}
|
||||
/>
|
||||
<span className="text-[10px] font-bold text-[#10b981] dark:text-green-400 leading-[15px]">
|
||||
{holding.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user