Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(wizard): move progress stepper to left sidebar

Browse Source
This commit is contained in:
DanielS
2026-08-11 17:26:49 +02:00
parent 7346b42ff3
commit 1478c61ea8
4 changed files with 164 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
shop/components/wizard/step-summary.tsx
View File

@@ -70,7 +70,7 @@ export function StepSummary({
<div className="lg:col-span-5 flex flex-col h-full overflow-hidden pr-4 space-y-6">
<div className="flex-1 overflow-y-auto pr-1 space-y-6 pb-4 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
{/* Header & Status Stepper */}
{/* Header */}
<div className="space-y-4">
<div className="flex items-center gap-3">
<div className="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center border border-primary/50 shrink-0">
@@ -85,39 +85,6 @@ export function StepSummary({
</p>
</div>
</div>
{/* Vertikaler Status-Stepper */}
<div className="space-y-4 py-4 border-t border-b border-white/5">
<p className="text-[10px] font-bold uppercase tracking-wider text-slate-500">
Schritt 4 von 4 — Zusammenfassung & Abschluss
</p>
<div className="flex flex-col gap-3 pl-1">
<div className="flex items-center gap-3">
<div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
<Icons.Check className="w-3.5 h-3.5" />
</div>
<span className="text-sm text-slate-400 font-medium">Kunde</span>
</div>
<div className="flex items-center gap-3">
<div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
<Icons.Check className="w-3.5 h-3.5" />
</div>
<span className="text-sm text-slate-400 font-medium">Modell</span>
</div>
<div className="flex items-center gap-3">
<div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
<Icons.Check className="w-3.5 h-3.5" />
</div>
<span className="text-sm text-slate-400 font-medium">Software</span>
</div>
<div className="flex items-center gap-3">
<div className="w-6 h-6 rounded-full bg-primary/20 border border-primary text-primary flex items-center justify-center text-xs font-bold shadow-[0_0_10px_rgba(59,130,246,0.2)]">
4
</div>
<span className="text-sm text-white font-bold">Abschluss</span>
</div>
</div>
</div>
</div>
{/* Kunden-Info Card */}