48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
// Fane-stripe for tilskuer-visningen (/watch/[id], ADR-044, 2026-08-06).
|
||
|
|
// Bevisst IKKE en gjenbruk av RoundHeader (eiersidens fane-mekanisme) --
|
||
|
|
// RoundHeader render alltid et "Administrer"-tannhjul som åpner
|
||
|
|
// ManageRoundDialog (Rediger/Fullfør/Slett-runde), uansett hvilke handlere
|
||
|
|
// som gis inn. En tilskuer skal aldri kunne nå de handlingene i det hele
|
||
|
|
// tatt -- denne komponenten inneholder rett og slett ingen slik kode, så
|
||
|
|
// det finnes ingen vei til at de vises ved et uhell.
|
||
|
|
|
||
|
|
import Link from "next/link"
|
||
|
|
import { cn } from "@/lib/utils"
|
||
|
|
|
||
|
|
export type WatchTab = "score" | "scorecard" | "leaderboard"
|
||
|
|
|
||
|
|
const TABS: { key: WatchTab; label: string }[] = [
|
||
|
|
{ key: "score", label: "Score" },
|
||
|
|
{ key: "scorecard", label: "Scorekort" },
|
||
|
|
{ key: "leaderboard", label: "Leaderboard" },
|
||
|
|
]
|
||
|
|
|
||
|
|
export function WatchTabs({ roundId, active }: { roundId: string; active: WatchTab }) {
|
||
|
|
const hrefFor = (tab: WatchTab) =>
|
||
|
|
tab === "score" ? `/watch/${roundId}` : `/watch/${roundId}/${tab}`
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav aria-label="Rundevisning" className="mx-auto w-full max-w-xl px-4 pt-3">
|
||
|
|
<div className="inline-flex w-full gap-1 rounded-full bg-muted p-1">
|
||
|
|
{TABS.map((tab) => (
|
||
|
|
<Link
|
||
|
|
key={tab.key}
|
||
|
|
href={hrefFor(tab.key)}
|
||
|
|
aria-current={active === tab.key ? "page" : undefined}
|
||
|
|
className={cn(
|
||
|
|
"flex min-h-11 flex-1 items-center justify-center rounded-full px-3 text-sm font-bold transition-all duration-200 ease-in-out",
|
||
|
|
active === tab.key
|
||
|
|
? "bg-primary text-primary-foreground"
|
||
|
|
: "text-muted-foreground hover:text-foreground",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{tab.label}
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
)
|
||
|
|
}
|