59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import Sidebar from "@/components/layout/Sidebar";
|
||
|
|
import TopBar from "@/components/layout/TopBar";
|
||
|
|
import ALPStatsCards from "@/components/alp/ALPStatsCards";
|
||
|
|
import PriceHistoryCard from "@/components/alp/PriceHistoryCard";
|
||
|
|
import PoolDepositPanel from "@/components/alp/PoolDepositPanel";
|
||
|
|
import LiquidityAllocationTable from "@/components/alp/LiquidityAllocationTable";
|
||
|
|
import { useApp } from "@/contexts/AppContext";
|
||
|
|
|
||
|
|
export default function ALPPage() {
|
||
|
|
const { t } = useApp();
|
||
|
|
const [refreshTrigger, setRefreshTrigger] = useState(0);
|
||
|
|
|
||
|
|
const breadcrumbItems = [
|
||
|
|
{ label: "ASSETX", href: "/" },
|
||
|
|
{ label: t("nav.alp") },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-white dark:bg-gray-900 flex">
|
||
|
|
<Sidebar />
|
||
|
|
<div className="flex-1 min-w-0 flex flex-col md:ml-[240px] pt-14 md:pt-0">
|
||
|
|
<div className="bg-[#F3F4F6] dark:bg-gray-800 border-b border-border-normal dark:border-gray-700 px-4 md:px-8 py-3">
|
||
|
|
<TopBar breadcrumbItems={breadcrumbItems} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex-1 px-4 md:px-8 py-4 md:py-8 bg-[#F3F4F6] dark:bg-gray-900">
|
||
|
|
{/* Page Title and Stats Cards Section */}
|
||
|
|
<div className="bg-white dark:bg-gray-900 rounded-3xl border border-border-gray dark:border-gray-700 px-4 md:px-6 py-6 md:py-8 mb-4 md:mb-8">
|
||
|
|
<div className="mb-4 md:mb-6">
|
||
|
|
<h1 className="text-2xl md:text-[32px] font-bold leading-[130%] tracking-[-0.01em] text-text-primary dark:text-white">
|
||
|
|
{t("alp.title")}
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Stats Cards */}
|
||
|
|
<div>
|
||
|
|
<ALPStatsCards />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Main Content - Price History and Pool Deposit Panel */}
|
||
|
|
<div className="flex flex-col md:grid md:grid-cols-[minmax(0,2fr)_minmax(360px,1fr)] gap-4 md:gap-8 mb-4 md:mb-8">
|
||
|
|
<PriceHistoryCard />
|
||
|
|
<PoolDepositPanel onSuccess={() => setRefreshTrigger(n => n + 1)} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Liquidity Allocation Table */}
|
||
|
|
<div>
|
||
|
|
<LiquidityAllocationTable refreshTrigger={refreshTrigger} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|