62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { use } from "react";
|
|
import { Navbar } from "@/components/layout/navbar";
|
|
import { ParticleBg } from "@/components/layout/particle-bg";
|
|
import { ViewSwitcher } from "@/components/layout/view-switcher";
|
|
import { ContinentMap } from "@/components/map/continent-map";
|
|
import { StatsPanel } from "@/components/dashboard/stats-panel";
|
|
import { LobsterFeed } from "@/components/dashboard/lobster-feed";
|
|
|
|
const continentNames: Record<string, string> = {
|
|
asia: "Asia",
|
|
europe: "Europe",
|
|
americas: "Americas",
|
|
africa: "Africa",
|
|
oceania: "Oceania",
|
|
};
|
|
|
|
interface PageProps {
|
|
params: Promise<{ slug: string }>;
|
|
}
|
|
|
|
export default function ContinentPage({ params }: PageProps) {
|
|
const { slug } = use(params);
|
|
const name = continentNames[slug] ?? "Unknown";
|
|
|
|
return (
|
|
<div className="relative min-h-screen">
|
|
<ParticleBg />
|
|
<Navbar activeView="map" />
|
|
|
|
<main className="relative z-10 mx-auto max-w-[1800px] px-4 pt-20 pb-8">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h1
|
|
className="font-mono text-2xl font-bold"
|
|
style={{
|
|
color: "var(--accent-cyan)",
|
|
textShadow: "var(--glow-cyan)",
|
|
}}
|
|
>
|
|
{name} Region
|
|
</h1>
|
|
<ViewSwitcher activeContinent={slug} />
|
|
</div>
|
|
|
|
<div className="grid gap-4 lg:grid-cols-[1fr_300px]">
|
|
{/* Map */}
|
|
<div>
|
|
<ContinentMap slug={slug} />
|
|
</div>
|
|
|
|
{/* Side Panel */}
|
|
<div className="flex flex-col gap-4">
|
|
<StatsPanel />
|
|
<LobsterFeed />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|