64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import Link from "next/link";
|
|
import { ArrowLeft } from "lucide-react";
|
|
import { LeaderboardSearch } from "@/components/leaderboard/leaderboard-search";
|
|
import { LeaderboardTabs } from "@/components/leaderboard/leaderboard-tabs";
|
|
import { SpaceBackground } from "@/components/space-background";
|
|
import { ThemeToggle } from "@/components/theme-toggle";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
|
|
type LeaderboardShellProps = {
|
|
active: "xp" | "vc";
|
|
title: string;
|
|
description: string;
|
|
searchQuery: string;
|
|
children: ReactNode;
|
|
};
|
|
|
|
export function LeaderboardShell({
|
|
active,
|
|
title,
|
|
description,
|
|
searchQuery,
|
|
children,
|
|
}: LeaderboardShellProps) {
|
|
return (
|
|
<main className="relative min-h-screen overflow-hidden bg-background text-foreground">
|
|
<SpaceBackground />
|
|
<div className="relative mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-6 sm:px-6 lg:py-10">
|
|
<nav aria-label="ทางลัด" className="flex items-center justify-between gap-3">
|
|
<Button variant="ghost" asChild>
|
|
<Link href="/">
|
|
<ArrowLeft data-icon="inline-start" />
|
|
กลับหน้าหลัก
|
|
</Link>
|
|
</Button>
|
|
<ThemeToggle />
|
|
</nav>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>
|
|
<h1 className="text-2xl font-semibold sm:text-3xl">{title}</h1>
|
|
</CardTitle>
|
|
<CardDescription className="max-w-2xl">{description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
|
|
<LeaderboardTabs active={active} searchQuery={searchQuery} />
|
|
<LeaderboardSearch query={searchQuery} />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{children}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|