大更新

app/page.tsx

@@ -1,18 +1,129 @@
-import Sidebar from "@/components/Sidebar";
-import TopBar from "@/components/TopBar";
-import ContentSection from "@/components/ContentSection";
+"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() {
-  return (
-    <div className="min-h-screen bg-bg-subtle dark:bg-gray-900">
-      <Sidebar />
-      <main className="ml-[222px] p-8 flex flex-col gap-8">
-        {/* Top Navigation Bar */}
-        <TopBar />
+  const router = useRouter();
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+  const [isTransitioning, setIsTransitioning] = useState(false);
 
-        {/* Tab Navigation and Content */}
-        <ContentSection />
-      </main>
+  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>
   );
 }