xufuhan/assetx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大改变

Browse Source
This commit is contained in:
YoRHa
2026-02-03 19:56:21 +08:00
parent 4b13d255bc
commit 9aa9e44295
545 changed files with 8712 additions and 16168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
components/lending/BorrowMarket.tsx Normal file
View File

@@ -0,0 +1,186 @@
"use client";
import { Button } from "@heroui/react";
import { useRouter } from "next/navigation";
import { useApp } from "@/contexts/AppContext";
import BorderedButton from "@/components/common/BorderedButton";
interface BorrowMarketItem {
icon: string;
iconBg: string;
name: string;
nameEn?: string;
category: string;
badge?: string;
yourBalance: string;
yourInterest: string;
borrowed: string;
ltv: string;
ltvColor: string;
ltvProgress: number;
}
export default function BorrowMarket() {
const { t } = useApp();
const router = useRouter();
const items: BorrowMarketItem[] = [
{
icon: "GY",
iconBg: "linear-gradient(135deg, #FF8904 0%, #F54900 100%)",
name: "高盈美股量化策略",
category: "Quant Strategy • RWA-042",
yourBalance: "$25,000",
yourInterest: "+$1,250",
borrowed: "$12,500",
ltv: "50%",
ltvColor: "text-[#ff6900]",
ltvProgress: 50,
},
{
icon: "LOGO",
iconBg: "linear-gradient(135deg, #00BBA7 0%, #007A55 100%)",
name: "HK Commercial RE",
nameEn: "PI Only",
category: "Real Estate • RWA-109",
yourBalance: "$25,000",
yourInterest: "+$1,250",
borrowed: "$12,500",
ltv: "40%",
ltvColor: "text-[#ff6900]",
ltvProgress: 40,
},
{
icon: "LOGO",
iconBg: "linear-gradient(135deg, #00BBA7 0%, #007A55 100%)",
name: "HK Commercial RE",
category: "Real Estate • RWA-109",
yourBalance: "$25,000",
yourInterest: "+$1,250",
borrowed: "$12,500",
ltv: "0%",
ltvColor: "text-text-tertiary",
ltvProgress: 0,
},
];
return (
<div className="flex flex-col gap-3">
{/* Title */}
<h2 className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
{t("lending.borrowMarket")}
</h2>
{/* Cards Grid */}
<div className="flex flex-col gap-3">
{items.map((item, index) => (
<div
key={index}
className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6 flex items-center gap-8"
>
{/* Left Section - Token Info */}
<div className="flex items-center gap-4 w-[280px]">
{/* Token Icon */}
<div
className="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold shadow-md"
style={{ background: item.iconBg }}
>
{item.icon}
</div>
{/* Token Name */}
<div className="flex flex-col h-10">
<div className="flex items-center gap-2">
<span className="text-body-default font-bold text-text-primary dark:text-white leading-[150%]">
{item.name}
</span>
{item.nameEn && (
<span className="bg-bg-subtle dark:bg-gray-700 rounded px-1.5 py-0.5 text-[10px] font-medium text-text-tertiary dark:text-gray-400">
{item.nameEn}
</span>
)}
</div>
<span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
{item.category}
</span>
</div>
</div>
{/* Middle Section - Stats */}
<div className="flex items-center justify-between flex-1">
{/* Your Balance */}
<div className="flex flex-col w-[112.9px]">
<span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
{t("lending.yourBalance")}
</span>
<span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
{item.yourBalance}
</span>
</div>
{/* Your Interest */}
<div className="flex flex-col w-[112.9px]">
<span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
{t("lending.yourInterest")}
</span>
<span className="text-body-small font-bold text-[#10b981] dark:text-green-400 leading-[150%]">
{item.yourInterest}
</span>
</div>
{/* Borrowed */}
<div className="flex flex-col w-[112.9px]">
<span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
{t("lending.borrowed")}
</span>
<span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
{item.borrowed}
</span>
</div>
{/* LTV */}
<div className="flex flex-col gap-2 w-[112.9px]">
<div className="flex items-center justify-between">
<span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
{t("lending.ltv")}
</span>
<span className={`text-caption-tiny font-bold leading-[150%] tracking-[0.01em] ${item.ltvColor} dark:text-orange-400`}>
{item.ltv}
</span>
</div>
{/* Progress Bar */}
{item.ltvProgress > 0 && (
<div className="w-full h-2 bg-fill-secondary-click dark:bg-gray-700 rounded-full overflow-hidden">
<div
className="h-full bg-[#ff6900] dark:bg-orange-500 rounded-full"
style={{ width: `${item.ltvProgress}%` }}
/>
</div>
)}
</div>
</div>
{/* Right Section - Buttons */}
<div className="flex items-center gap-3">
<Button
className="rounded-xl h-10 px-6 text-body-small font-bold bg-foreground text-background"
isDisabled={index === 2}
onPress={() => router.push("/repay")}
>
{t("lending.repay")}
</Button>
<BorderedButton
size="md"
isTheme
className="whitespace-nowrap"
>
{t("lending.borrow")}
</BorderedButton>
</div>
</div>
))}
</div>
</div>
);
}