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

style: add sidebar step indicator to step 3

Browse Source
This commit is contained in:
DanielS
2026-08-10 23:50:22 +02:00
parent 8b698e42ec
commit cab64028f6
1 changed files with 33 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
shop/components/order-wizard.tsx
View File

@@ -939,6 +939,39 @@ export function OrderWizard({
</p>
</div>
{/* Left Sidebar Status Stepper */}
<div className="space-y-4 py-4 border-t border-b border-white/5">
<p className="text-xs font-bold uppercase tracking-wider text-slate-500">
Schritt 3 von 4 — Software konfigurieren
</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">
<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">
<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-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)]">
3
</div>
<span className="text-sm text-white font-bold">Software</span>
</div>
<div className="flex items-center gap-3">
<div className="w-6 h-6 rounded-full bg-white/5 border border-white/10 text-slate-500 flex items-center justify-center text-xs">
4
</div>
<span className="text-sm text-slate-600 font-medium">Abschluss</span>
</div>
</div>
</div>
<div className="flex flex-col gap-2">
{visibleCategories.map((cat) => {
const sel = selections[cat.id]