109 lines
3.6 KiB
TypeScript
109 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import dynamic from "next/dynamic";
|
|
import { useTranslations } from "next-intl";
|
|
import { 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 { 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 { cn } from "@/lib/utils";
|
|
|
|
const ContinentMap = dynamic(
|
|
() =>
|
|
import("@/components/map/continent-map").then((m) => ({
|
|
default: m.ContinentMap,
|
|
})),
|
|
{ ssr: false }
|
|
);
|
|
|
|
const continentSlugs = ["asia", "europe", "americas", "africa", "oceania"] as const;
|
|
|
|
export default function HomePage() {
|
|
const [activeContinent, setActiveContinent] = useState<string>("asia");
|
|
const tContinents = useTranslations("continents");
|
|
const tRegion = useTranslations("regionExplorer");
|
|
|
|
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">
|
|
{/* Section 1: Globe + 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 />
|
|
</div>
|
|
|
|
{/* Center - Globe + Timeline */}
|
|
<div className="flex flex-col gap-4">
|
|
<div className="h-[500px] lg:h-[600px]">
|
|
<GlobeView />
|
|
</div>
|
|
<ActivityTimeline />
|
|
</div>
|
|
|
|
{/* Right Panel */}
|
|
<div className="flex flex-col gap-4">
|
|
<ClawFeed />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Section 2: Region Explorer */}
|
|
<section className="mt-8">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h2
|
|
className="flex items-center gap-2 font-mono text-2xl font-bold"
|
|
style={{
|
|
color: "var(--accent-cyan)",
|
|
textShadow: "var(--glow-cyan)",
|
|
}}
|
|
>
|
|
<Map className="h-5 w-5" />
|
|
{tRegion("title")}
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Continent Tabs */}
|
|
<div className="mb-4 flex flex-wrap gap-2">
|
|
{continentSlugs.map((slug) => (
|
|
<button
|
|
key={slug}
|
|
onClick={() => setActiveContinent(slug)}
|
|
className={cn(
|
|
"rounded-lg border px-4 py-2 text-sm font-medium transition-all",
|
|
activeContinent === slug
|
|
? "border-[var(--accent-cyan)]/30 bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)]"
|
|
: "border-white/5 text-[var(--text-muted)] hover:border-white/10 hover:text-[var(--text-secondary)]"
|
|
)}
|
|
>
|
|
{tContinents(slug)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Map — explicit height so MapLibre can render */}
|
|
<ContinentMap
|
|
key={activeContinent}
|
|
slug={activeContinent}
|
|
className="h-[calc(100vh-14rem)]"
|
|
/>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|