57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useApp } from "@/contexts/AppContext";
|
|
|
|
export default function LendingHeader() {
|
|
const { t } = useApp();
|
|
|
|
const stats = [
|
|
{
|
|
label: t("lending.totalUsdcSupply"),
|
|
value: "$200.4M",
|
|
valueColor: "text-text-primary dark:text-white",
|
|
},
|
|
{
|
|
label: t("lending.utilization"),
|
|
value: "65%",
|
|
valueColor: "text-[#10b981] dark:text-green-400",
|
|
},
|
|
{
|
|
label: t("lending.activeLoans"),
|
|
value: "3",
|
|
valueColor: "text-text-primary dark:text-white",
|
|
},
|
|
];
|
|
|
|
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-6">
|
|
{/* Title Section */}
|
|
<div className="flex flex-col gap-0">
|
|
<h1 className="text-heading-h2 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em]">
|
|
{t("lending.title")}
|
|
</h1>
|
|
<p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
|
{t("lending.subtitle")}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div className="flex gap-4 w-full">
|
|
{stats.map((stat, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex-1 bg-bg-subtle dark:bg-gray-700 rounded-2xl border border-border-gray dark:border-gray-600 p-4 flex flex-col gap-2"
|
|
>
|
|
<span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
|
{stat.label}
|
|
</span>
|
|
<span className={`text-heading-h2 font-bold leading-[130%] tracking-[-0.01em] ${stat.valueColor}`}>
|
|
{stat.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|