msolarczekandClaude Opus 5
94092ade3f
/reports mit Filtern (zur Prüfung zuerst), /reports/[id] mit Aktionen, Versionen und PDF-Link; mobile Komponenten für Bericht, Prüfung und Unterschrift inkl. Signature-Pad; Texte de/en. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
import { Check } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/** Progress for the multi-step mobile completion (Brandbook §12.2). `current` is 1-based. */
|
|
export function StepIndicator({ steps, current, label }: { steps: string[]; current: number; label: string }) {
|
|
return (
|
|
<nav aria-label={label}>
|
|
<ol className="flex items-center gap-1.5">
|
|
{steps.map((s, i) => {
|
|
const n = i + 1;
|
|
const done = n < current;
|
|
const active = n === current;
|
|
return (
|
|
<li key={s} className="flex min-w-0 flex-1 flex-col items-center gap-1" aria-current={active ? "step" : undefined}>
|
|
<span
|
|
className={cn(
|
|
"grid size-7 place-items-center rounded-full border text-[12px] font-bold",
|
|
done && "border-[var(--ok)] text-[var(--ok)]",
|
|
active && "border-[var(--ui-accent)] bg-[var(--ui-accent)] text-[var(--ui-accent-foreground)]",
|
|
!done && !active && "text-muted-foreground",
|
|
)}
|
|
>
|
|
{done ? <Check className="size-3.5" aria-hidden /> : n}
|
|
</span>
|
|
<span className={cn("truncate text-[11px]", active ? "font-semibold" : "text-muted-foreground")}>{s}</span>
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
<p className="sr-only">{label}</p>
|
|
</nav>
|
|
);
|
|
}
|