74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Image from "next/image";
|
||
|
|
import { useApp } from "@/contexts/AppContext";
|
||
|
|
|
||
|
|
export default function LendingStats() {
|
||
|
|
const { t } = useApp();
|
||
|
|
|
||
|
|
// Mini bar chart data (heights in percentage)
|
||
|
|
const chartBars = [
|
||
|
|
{ height: 40, color: "#f2fcf7" },
|
||
|
|
{ height: 55, color: "#e1f8ec" },
|
||
|
|
{ height: 45, color: "#cef3e0" },
|
||
|
|
{ height: 65, color: "#b8ecd2" },
|
||
|
|
{ height: 80, color: "#00ad76" },
|
||
|
|
{ height: 95, color: "#10b981" },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex items-center gap-6 h-[180px]">
|
||
|
|
{/* Left Section - USDC Borrowed and Avg. APY */}
|
||
|
|
<div className="flex items-center gap-12 flex-1">
|
||
|
|
{/* USDC Borrowed */}
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
<span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
||
|
|
{t("lending.usdcBorrowed")}
|
||
|
|
</span>
|
||
|
|
<span className="text-heading-h2 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em]">
|
||
|
|
$125.2M
|
||
|
|
</span>
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Image src="/icon0.svg" alt="" width={14} height={14} />
|
||
|
|
<span className="text-[12px] font-medium text-[#10b981] dark:text-green-400 leading-[16px]">
|
||
|
|
+12% {t("lending.vsLastMonth")}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Divider */}
|
||
|
|
<div className="w-px h-12 bg-border-gray dark:bg-gray-600" />
|
||
|
|
|
||
|
|
{/* Avg. APY */}
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
<span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
||
|
|
{t("lending.avgApy")}
|
||
|
|
</span>
|
||
|
|
<span className="text-heading-h2 font-bold text-[#10b981] dark:text-green-400 leading-[130%] tracking-[-0.01em]">
|
||
|
|
20.5%
|
||
|
|
</span>
|
||
|
|
<div className="flex items-center h-4">
|
||
|
|
<span className="text-[12px] font-regular text-text-tertiary dark:text-gray-400 leading-[16px]">
|
||
|
|
{t("lending.stableYield")}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Right Section - Mini Chart */}
|
||
|
|
<div className="flex items-end gap-1 w-48 h-16">
|
||
|
|
{chartBars.map((bar, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="flex-1 rounded-t-md transition-all"
|
||
|
|
style={{
|
||
|
|
backgroundColor: bar.color,
|
||
|
|
height: `${bar.height}%`,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|