67 lines
2.7 KiB
TypeScript
67 lines
2.7 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { Clock } from "lucide-react"
|
||
|
|
|
||
|
|
export type RoundSummary = {
|
||
|
|
id: string
|
||
|
|
name: string
|
||
|
|
sequence: number
|
||
|
|
courseName: string | null
|
||
|
|
dateLabel: string | null // already formatted, e.g. "20. sep 2026", or null if unscheduled
|
||
|
|
}
|
||
|
|
|
||
|
|
export type RoundGroupsStepListProps = {
|
||
|
|
rounds: RoundSummary[]
|
||
|
|
onManageGroups: (roundId: string) => void
|
||
|
|
}
|
||
|
|
|
||
|
|
export function RoundGroupsStepList({ rounds, onManageGroups }: RoundGroupsStepListProps) {
|
||
|
|
if (rounds.length === 0) {
|
||
|
|
return (
|
||
|
|
<div className="rounded-2xl border border-border bg-card p-6 shadow-md shadow-black/8">
|
||
|
|
<p className="text-pretty text-center text-sm leading-relaxed text-muted-foreground">
|
||
|
|
Ingen runder er lagt til ennå — legg til runder under «Runder og baner» først.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
// Connected list: one container, rows divided by hairlines — not separate
|
||
|
|
// shadowed cards with gaps between them.
|
||
|
|
<div className="overflow-hidden rounded-2xl border border-border bg-card shadow-md shadow-black/8">
|
||
|
|
<ul className="divide-y divide-border">
|
||
|
|
{rounds.map((round) => {
|
||
|
|
// Build the secondary "course · date" line from whatever is set.
|
||
|
|
const meta = [round.courseName, round.dateLabel].filter(Boolean).join(" · ")
|
||
|
|
return (
|
||
|
|
<li
|
||
|
|
key={round.id}
|
||
|
|
className="flex flex-wrap items-center justify-between gap-3 p-4 sm:p-5"
|
||
|
|
>
|
||
|
|
<div className="flex min-w-0 flex-col gap-0.5">
|
||
|
|
<span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
|
||
|
|
Runde {round.sequence}
|
||
|
|
</span>
|
||
|
|
<span className="truncate text-base font-bold text-foreground">{round.name}</span>
|
||
|
|
<span className="truncate text-sm text-muted-foreground tabular-nums">
|
||
|
|
{meta === "" ? "Ingen bane eller dato satt ennå" : meta}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => onManageGroups(round.id)}
|
||
|
|
className="inline-flex min-h-11 shrink-0 items-center gap-2 rounded-xl border border-border bg-card px-4 py-2.5 text-sm font-bold text-foreground transition-all duration-200 ease-in-out hover:bg-accent/50 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
|
||
|
|
>
|
||
|
|
<Clock aria-hidden="true" className="size-5 shrink-0" />
|
||
|
|
<span>Rediger grupper</span>
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|