63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Button } from "@heroui/react";
|
||
|
|
import { useApp } from "@/contexts/AppContext";
|
||
|
|
import { buttonStyles } from "@/lib/buttonStyles";
|
||
|
|
|
||
|
|
export default function RepaySupplyCollateral() {
|
||
|
|
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-8 flex-1 shadow-md">
|
||
|
|
{/* Title */}
|
||
|
|
<h3 className="text-body-large font-bold text-text-primary dark:text-white leading-[150%]">
|
||
|
|
{t("repay.supplyCollateral")}
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
{/* Token Info and APR */}
|
||
|
|
<div className="flex items-center justify-between h-[50px]">
|
||
|
|
{/* Left - Token Info */}
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
{/* 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: "linear-gradient(135deg, #FF8904 0%, #F54900 100%)" }}
|
||
|
|
>
|
||
|
|
GY
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Amount */}
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
|
||
|
|
1,000 YTGY
|
||
|
|
</span>
|
||
|
|
<span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
||
|
|
$10,000.00
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Right - APR */}
|
||
|
|
<div className="flex flex-col items-end">
|
||
|
|
<span className="text-heading-h3 font-bold text-[#10b981] dark:text-green-400 leading-[130%] tracking-[-0.005em]">
|
||
|
|
9.1%
|
||
|
|
</span>
|
||
|
|
<span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
||
|
|
{t("repay.apr")}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Buttons */}
|
||
|
|
<div className="grid grid-cols-2 gap-3">
|
||
|
|
<Button className={buttonStyles({ intent: "theme" })}>
|
||
|
|
{t("repay.deposit")}
|
||
|
|
</Button>
|
||
|
|
<Button className="rounded-xl h-11 w-full px-6 text-body-small font-bold bg-content2 text-foreground">
|
||
|
|
{t("repay.withdraw")}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|