70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Image from "next/image";
|
||
|
|
import { useApp } from "@/contexts/AppContext";
|
||
|
|
|
||
|
|
export default function RepayStats() {
|
||
|
|
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 h-[249px] shadow-md">
|
||
|
|
{/* Stats Info */}
|
||
|
|
<div className="flex flex-col gap-6 h-[120px]">
|
||
|
|
{/* NET APR */}
|
||
|
|
<div className="flex items-center justify-between h-7">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Image src="/icon0.svg" alt="" width={18} height={18} />
|
||
|
|
<span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
|
||
|
|
{t("repay.netApr")}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<span className="text-body-small font-bold text-[#10b981] dark:text-green-400 leading-[150%]">
|
||
|
|
3%
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Liq.price/offset */}
|
||
|
|
<div className="flex items-center justify-between h-7">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Image src="/icon1.svg" alt="" width={18} height={18} />
|
||
|
|
<span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
|
||
|
|
{t("repay.liqPriceOffset")}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
|
||
|
|
$0.938
|
||
|
|
</span>
|
||
|
|
<span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
|
||
|
|
/ 20%
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Position Health */}
|
||
|
|
<div className="flex items-center justify-between h-7">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Image src="/icon2.svg" alt="" width={18} height={18} />
|
||
|
|
<span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
|
||
|
|
{t("repay.positionHealth")}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<span className="text-body-small font-bold text-[#10b981] dark:text-green-400 leading-[150%]">
|
||
|
|
Safe 50%
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Progress Bar */}
|
||
|
|
<div className="w-full">
|
||
|
|
<div className="w-full h-2 bg-fill-secondary-click dark:bg-gray-700 rounded-full overflow-hidden">
|
||
|
|
<div
|
||
|
|
className="h-full bg-[#10b981] dark:bg-green-500 rounded-full"
|
||
|
|
style={{ width: "50%" }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|