130 lines
4.8 KiB
TypeScript
130 lines
4.8 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
import Sidebar from "@/components/layout/Sidebar";
|
|
import TopBar from "@/components/layout/TopBar";
|
|
import PageTitle from "@/components/layout/PageTitle";
|
|
import SectionHeader from "@/components/layout/SectionHeader";
|
|
import ViewToggle from "@/components/fundmarket/ViewToggle";
|
|
import StatsCards from "@/components/fundmarket/StatsCards";
|
|
import ProductCard from "@/components/fundmarket/ProductCard";
|
|
import ProductCardList from "@/components/fundmarket/ProductCardList";
|
|
import { fundMarketStats, fundMarketProducts } from "@/data/fundMarket";
|
|
|
|
export default function Home() {
|
|
const router = useRouter();
|
|
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
|
|
const [isTransitioning, setIsTransitioning] = useState(false);
|
|
|
|
const breadcrumbItems = [
|
|
{ label: "ASSETX", href: "/" },
|
|
{ label: "Fund Market" },
|
|
];
|
|
|
|
const handleViewChange = (newMode: "grid" | "list") => {
|
|
if (newMode === viewMode) return;
|
|
setIsTransitioning(true);
|
|
setTimeout(() => {
|
|
setViewMode(newMode);
|
|
setIsTransitioning(false);
|
|
}, 200);
|
|
};
|
|
|
|
const handleInvest = (productId: number) => {
|
|
router.push(`/product/${productId}`);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white dark:bg-gray-900 flex">
|
|
<Sidebar />
|
|
<div className="flex-1 flex flex-col ml-[222px]">
|
|
{/* Top Bar */}
|
|
<div className="bg-gray-100 dark:bg-gray-800 border-b border-border-normal dark:border-gray-700 px-8 py-3">
|
|
<TopBar breadcrumbItems={breadcrumbItems} />
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 px-8 py-8 bg-gray-100 dark:bg-gray-800">
|
|
{/* Page Title */}
|
|
<PageTitle title="AssetX Fund Market" />
|
|
|
|
{/* Stats Cards */}
|
|
<div className="mb-8">
|
|
<StatsCards stats={fundMarketStats} />
|
|
</div>
|
|
|
|
{/* Assets Section */}
|
|
<div className="flex flex-col gap-6">
|
|
{/* Section Header with View Toggle */}
|
|
<SectionHeader title="Assets">
|
|
<ViewToggle value={viewMode} onChange={handleViewChange} />
|
|
</SectionHeader>
|
|
|
|
{/* Product Cards - Grid or List View */}
|
|
<div
|
|
className="transition-opacity duration-200"
|
|
style={{ opacity: isTransitioning ? 0 : 1 }}
|
|
>
|
|
{viewMode === "grid" ? (
|
|
<div className="flex flex-row gap-6">
|
|
{fundMarketProducts.map((product, index) => (
|
|
<div
|
|
key={product.id}
|
|
className="flex-1 animate-fade-in"
|
|
style={{
|
|
animationDelay: `${index * 0.1}s`,
|
|
animationFillMode: "backwards",
|
|
}}
|
|
>
|
|
<ProductCard
|
|
name={product.name}
|
|
category={product.category}
|
|
categoryColor={product.categoryColor}
|
|
iconType={product.iconType}
|
|
yieldAPY={product.yieldAPY}
|
|
poolCap={product.poolCap}
|
|
maturity={product.maturity}
|
|
risk={product.risk}
|
|
riskLevel={product.riskLevel}
|
|
lockUp={product.lockUp}
|
|
circulatingSupply={product.circulatingSupply}
|
|
poolCapacityPercent={product.poolCapacityPercent}
|
|
onInvest={() => handleInvest(product.id)}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-4">
|
|
{fundMarketProducts.map((product, index) => (
|
|
<div
|
|
key={product.id}
|
|
className="animate-fade-in"
|
|
style={{
|
|
animationDelay: `${index * 0.08}s`,
|
|
animationFillMode: "backwards",
|
|
}}
|
|
>
|
|
<ProductCardList
|
|
name={product.name}
|
|
category={product.category}
|
|
categoryColor={product.categoryColor}
|
|
iconType={product.iconType}
|
|
poolCap={product.poolCap}
|
|
lockUp={product.lockUp}
|
|
poolCapacityPercent={product.poolCapacityPercent}
|
|
onInvest={() => handleInvest(product.id)}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|