76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Sidebar from "@/components/layout/Sidebar";
|
|
import TopBar from "@/components/layout/TopBar";
|
|
import RepayHeader from "@/components/lending/repay/RepayHeader";
|
|
import RepaySupplyCollateral from "@/components/lending/repay/RepaySupplyCollateral";
|
|
import RepayBorrowDebt from "@/components/lending/repay/RepayBorrowDebt";
|
|
import RepayStats from "@/components/lending/repay/RepayStats";
|
|
import RepayPoolStats from "@/components/lending/repay/RepayPoolStats";
|
|
import { useRouter } from "next/navigation";
|
|
import { useApp } from "@/contexts/AppContext";
|
|
|
|
export default function RepayPage() {
|
|
const { t } = useApp();
|
|
const router = useRouter();
|
|
|
|
const handleBackToLending = () => {
|
|
router.push("/lending");
|
|
};
|
|
|
|
const breadcrumbItems = [
|
|
{ label: "ASSETX", href: "/" },
|
|
{ label: t("nav.lending"), href: "/lending" },
|
|
{ label: t("repay.repay") },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white dark:bg-gray-900 flex">
|
|
<Sidebar />
|
|
<div className="flex-1 flex flex-col ml-[222px]">
|
|
<div className="bg-[#F3F4F6] dark:bg-gray-800 border-b border-border-normal dark:border-gray-700 px-8 py-3">
|
|
<TopBar breadcrumbItems={breadcrumbItems} />
|
|
</div>
|
|
|
|
<div className="flex-1 px-8 py-8 bg-[#F3F4F6] dark:bg-gray-900 flex flex-col gap-8">
|
|
{/* Back to lending link */}
|
|
<button
|
|
onClick={handleBackToLending}
|
|
className="flex items-center gap-2 self-start group"
|
|
>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="group-hover:translate-x-[-2px] transition-transform"
|
|
>
|
|
<path
|
|
d="M10 12L6 8L10 4"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="text-text-tertiary dark:text-gray-400"
|
|
/>
|
|
</svg>
|
|
<span className="text-body-large font-semibold text-text-tertiary dark:text-gray-400 group-hover:text-text-primary dark:group-hover:text-white transition-colors">
|
|
{t("repay.backToLending")}
|
|
</span>
|
|
</button>
|
|
|
|
<RepayHeader />
|
|
<div className="flex gap-8">
|
|
<RepaySupplyCollateral />
|
|
<RepayBorrowDebt />
|
|
<RepayStats />
|
|
</div>
|
|
<RepayPoolStats />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|