62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { use } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
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 { ClawFeed } from "@/components/dashboard/claw-feed";
|
|
|
|
const continentSlugs = ["asia", "europe", "americas", "africa", "oceania"] as const;
|
|
|
|
interface PageProps {
|
|
params: Promise<{ slug: string }>;
|
|
}
|
|
|
|
export default function ContinentPage({ params }: PageProps) {
|
|
const { slug } = use(params);
|
|
const t = useTranslations("continents");
|
|
const tPage = useTranslations("continentPage");
|
|
|
|
const name = continentSlugs.includes(slug as (typeof continentSlugs)[number])
|
|
? t(slug as (typeof continentSlugs)[number])
|
|
: "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)",
|
|
}}
|
|
>
|
|
{tPage("regionTitle", { name })}
|
|
</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 />
|
|
<ClawFeed />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|