teecup/frontend/components/tournament-card.tsx
Erol Haagenrud c8c4ad29b6 Dashbordet er bygget (zip 18 integrert): kun dashboard.tsx var reelt nytt fra V0, og jeg fant en genuin merge-situasjon i tournament-card.tsx — V0s nye "Arrangør"-merkelapp lagt til ved siden av den eksisterende offentlig/innlogget-lenkelogikken, ikke en revert. "Ny turnering" implementerer nå selve ADR-035-mekanismen (usynlig org-opprettelse ved innsending), "Statistikk"/"Spilte baner" er ren klientside-utledning fra data vi allerede har, og "Venner" viser en ærlig tom-tilstand siden ADR-036 ikke er bygget ennå. Typesjekket produksjonsbuild kompilerte rent.
Notert og bekreftet:

Medspillere skal kunne registrere score for hele flighten, ikke bare egen rad — oppdatert i ADR-036 (sletting av runden/bane-bytte forblir eier-eksklusivt).
To nye backlog-notater: flytte spillere mellom lag i turneringsoppsett, og flere flighter i én frittstående runde (sistnevnte har en reell modelleringsspenning mellom to retninger — ikke besluttet, bør trolig vente til ADR-036 fase 1 er bygget).
2026-07-25 07:51:32 +02:00

86 lines
3 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import Link from "next/link"
import { Calendar, ChevronRight } from "lucide-react"
import { TournamentStatusBadge, type TournamentStatus } from "@/components/tournament-status-badge"
export type Tournament = {
id: string
name: string
status: TournamentStatus
startDate?: string
endDate?: string
}
const dateFormatter = new Intl.DateTimeFormat("no-NO", {
day: "numeric",
month: "short",
year: "numeric",
})
function formatDate(value?: string) {
if (!value) return null
const parsed = new Date(value)
if (Number.isNaN(parsed.getTime())) return null
return dateFormatter.format(parsed)
}
function formatDateRange(start?: string, end?: string) {
const from = formatDate(start)
const to = formatDate(end)
if (from && to) return from === to ? from : `${from} ${to}`
return from ?? to ?? null
}
export function TournamentCard({
tournament,
orgId,
organizer = false,
}: {
tournament: Tournament
// Satt (dashbordet, innlogget) -> lenker til den innloggede detaljsiden.
// Utelatt (klubb-landingsside, offentlig) -> lenker til den offentlige
// /t/{id}-ruten i stedet. Samme kort, to kontekster.
orgId?: string
// Vis en "Arrangør"-merkelapp (dashbordets slåtte-sammen "Kommende
// turneringer"-liste, 2026-07-25 -- deltaker- og arrangør-turneringer i
// ÉN liste, merkelappen skiller dem visuelt).
organizer?: boolean
}) {
const dateRange = formatDateRange(tournament.startDate, tournament.endDate)
const href = orgId
? `/tournaments/${tournament.id}?org=${orgId}&name=${encodeURIComponent(tournament.name)}`
: `/t/${tournament.id}`
return (
<Link
href={href}
className="group flex w-full items-center gap-4 rounded-2xl border border-border bg-card p-4 text-left shadow-sm shadow-black/5 transition-colors hover:border-primary/50 hover:bg-accent/50 sm:p-5"
>
<div className="flex min-w-0 flex-1 flex-col gap-2">
<div className="flex flex-wrap items-center gap-x-3 gap-y-2">
<h3 className="truncate text-base font-bold text-foreground sm:text-lg">
{tournament.name}
</h3>
<TournamentStatusBadge status={tournament.status} />
{organizer && (
<span className="inline-flex items-center gap-1.5 rounded-full bg-brand-orange/15 px-2.5 py-1 text-xs font-semibold text-foreground">
<span aria-hidden="true" className="size-1.5 rounded-full bg-brand-orange" />
Arrangør
</span>
)}
</div>
{dateRange ? (
<div className="flex items-center gap-1.5 text-sm text-muted-foreground">
<Calendar aria-hidden="true" className="size-4 shrink-0" />
<span className="tabular-nums">{dateRange}</span>
</div>
) : (
<span className="text-sm text-muted-foreground">Ingen datoer satt</span>
)}
</div>
<ChevronRight
aria-hidden="true"
className="size-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-foreground"
/>
</Link>
)
}