68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { cn } from "@/lib/utils"
|
||
|
|
import { Check } from "lucide-react"
|
||
|
|
import { useWizard } from "./wizard-context"
|
||
|
|
|
||
|
|
const STEP_LABELS: Record<number, string> = {
|
||
|
|
1: "Bane & tid",
|
||
|
|
2: "Spilleform",
|
||
|
|
3: "Spillere",
|
||
|
|
4: "Lag og rekkefølge",
|
||
|
|
5: "Deling",
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ProgressSteps() {
|
||
|
|
const { state, visibleSteps } = useWizard()
|
||
|
|
const currentIdx = visibleSteps.indexOf(state.step)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav aria-label="Fremdrift">
|
||
|
|
<ol className="flex items-center gap-1.5">
|
||
|
|
{visibleSteps.map((stepNo, i) => {
|
||
|
|
const isCurrent = i === currentIdx
|
||
|
|
const isDone = i < currentIdx
|
||
|
|
return (
|
||
|
|
<li key={stepNo} className="flex min-w-0 flex-1 items-center gap-1.5">
|
||
|
|
<div className="flex min-w-0 items-center gap-2">
|
||
|
|
<span
|
||
|
|
className={cn(
|
||
|
|
"flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold tabular-nums transition-colors",
|
||
|
|
isCurrent && "bg-[var(--nr-accent)] text-[var(--nr-accent-ink)]",
|
||
|
|
isDone && "bg-[var(--nr-accent-soft)] text-[var(--nr-accent)]",
|
||
|
|
!isCurrent && !isDone && "bg-[var(--nr-surface-2)] text-[var(--nr-faint)] ring-1 ring-inset ring-[var(--nr-border)]",
|
||
|
|
)}
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
{isDone ? <Check className="h-3.5 w-3.5" strokeWidth={3} /> : i + 1}
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
className={cn(
|
||
|
|
"hidden truncate text-xs font-medium sm:inline",
|
||
|
|
isCurrent ? "text-[var(--nr-ink)]" : "text-[var(--nr-muted)]",
|
||
|
|
)}
|
||
|
|
aria-current={isCurrent ? "step" : undefined}
|
||
|
|
>
|
||
|
|
{STEP_LABELS[stepNo]}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
{i < visibleSteps.length - 1 ? (
|
||
|
|
<span
|
||
|
|
aria-hidden="true"
|
||
|
|
className={cn(
|
||
|
|
"h-px flex-1 transition-colors",
|
||
|
|
isDone ? "bg-[var(--nr-accent-ring)]" : "bg-[var(--nr-border)]",
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
) : null}
|
||
|
|
</li>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</ol>
|
||
|
|
<p className="sr-only" aria-live="polite">
|
||
|
|
Steg {currentIdx + 1} av {visibleSteps.length}: {STEP_LABELS[state.step]}
|
||
|
|
</p>
|
||
|
|
</nav>
|
||
|
|
)
|
||
|
|
}
|