122 lines
4.3 KiB
TypeScript
122 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import dynamic from "next/dynamic";
|
|
import { useTranslations } from "next-intl";
|
|
import { Globe, Map } from "lucide-react";
|
|
import { Navbar } from "@/components/layout/navbar";
|
|
import { InstallBanner } from "@/components/layout/install-banner";
|
|
import { ParticleBg } from "@/components/layout/particle-bg";
|
|
import { Hero } from "@/components/layout/hero";
|
|
import { GlobeView } from "@/components/globe/globe-view";
|
|
import { StatsPanel } from "@/components/dashboard/stats-panel";
|
|
import { ActivityTimeline } from "@/components/dashboard/activity-timeline";
|
|
import { ClawFeed } from "@/components/dashboard/claw-feed";
|
|
import { RegionRanking } from "@/components/dashboard/region-ranking";
|
|
import { TokenLeaderboard } from "@/components/dashboard/token-leaderboard";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const WorldMap = dynamic(
|
|
() =>
|
|
import("@/components/map/world-map").then((m) => ({
|
|
default: m.WorldMap,
|
|
})),
|
|
{
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className="flex h-full items-center justify-center">
|
|
<div className="flex flex-col items-center gap-3">
|
|
<div className="h-8 w-8 animate-spin rounded-full border-2 border-[var(--accent-cyan)] border-t-transparent" />
|
|
<span className="font-mono text-xs text-[var(--text-muted)]">Loading map...</span>
|
|
</div>
|
|
</div>
|
|
),
|
|
}
|
|
);
|
|
|
|
type ViewMode = "2d" | "3d";
|
|
|
|
export default function HomePage() {
|
|
const [viewMode, setViewMode] = useState<ViewMode>("2d");
|
|
const tNavbar = useTranslations("navbar");
|
|
|
|
return (
|
|
<div className="relative min-h-screen">
|
|
<ParticleBg />
|
|
<Navbar />
|
|
|
|
<main className="relative z-10 mx-auto max-w-[1800px] px-4 pt-20 pb-8">
|
|
{/* Hero Section */}
|
|
<Hero />
|
|
|
|
{/* Section 1: Main Map View + Dashboard */}
|
|
<section className="min-h-[calc(100vh-5rem)]">
|
|
<div className="mb-4">
|
|
<InstallBanner />
|
|
</div>
|
|
|
|
<div className="grid gap-4 lg:grid-cols-[280px_1fr_280px]">
|
|
{/* Left Panel */}
|
|
<div className="flex flex-col gap-4">
|
|
<StatsPanel />
|
|
<RegionRanking />
|
|
<TokenLeaderboard />
|
|
</div>
|
|
|
|
{/* Center - Map/Globe + Timeline */}
|
|
<div className="flex flex-col gap-4">
|
|
{/* View Switcher + Map Container */}
|
|
<div className="relative h-[500px] lg:h-[600px]">
|
|
{/* View Mode Toggle */}
|
|
<div className="absolute left-4 top-4 z-20 flex rounded-lg border border-white/10 bg-[var(--bg-card)]/90 p-1 backdrop-blur-sm">
|
|
<button
|
|
onClick={() => setViewMode("2d")}
|
|
className={cn(
|
|
"flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
|
|
viewMode === "2d"
|
|
? "bg-[var(--accent-cyan)]/20 text-[var(--accent-cyan)]"
|
|
: "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
|
|
)}
|
|
>
|
|
<Map className="h-3.5 w-3.5" />
|
|
{tNavbar("map")}
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode("3d")}
|
|
className={cn(
|
|
"flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
|
|
viewMode === "3d"
|
|
? "bg-[var(--accent-cyan)]/20 text-[var(--accent-cyan)]"
|
|
: "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
|
|
)}
|
|
>
|
|
<Globe className="h-3.5 w-3.5" />
|
|
{tNavbar("globe")}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Map View */}
|
|
{viewMode === "2d" && (
|
|
<WorldMap className="h-full w-full" />
|
|
)}
|
|
|
|
{/* Globe View */}
|
|
{viewMode === "3d" && (
|
|
<GlobeView />
|
|
)}
|
|
</div>
|
|
|
|
<ActivityTimeline />
|
|
</div>
|
|
|
|
{/* Right Panel */}
|
|
<div className="flex flex-col gap-4">
|
|
<ClawFeed />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|