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

style(wizard): dock stepper in step 3 and make summary card sticky top-[20vh]
All checks were successful
Staging Build / build (push) Successful in 2m50s
Details

Browse Source
This commit is contained in:
DanielS
2026-07-10 10:52:07 +02:00
parent 993c817dff
commit 0b268881a1
1 changed files with 43 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -703,26 +703,28 @@ export function OrderWizard({
return (
<div className="max-w-5xl mx-auto py-12 px-4">
{/* Progress Stepper */}
<div className="max-w-md mx-auto mb-12">
<div className="flex justify-between relative">
<div className="absolute top-1/2 left-0 w-full h-0.5 bg-white/10 -translate-y-1/2 z-0" />
{[1, 2, 3, 4].map(s => (
<div key={s} className="relative z-10 flex flex-col items-center gap-2">
<div
className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-500 ${step >= s
? 'bg-primary text-white scale-110 shadow-[0_0_15px_rgba(59,130,246,0.5)]'
: 'bg-slate-800 text-slate-400'
}`}
>
{step > s ? <Check className="w-6 h-6" /> : s}
{step !== 3 && (
<div className="max-w-md mx-auto mb-12">
<div className="flex justify-between relative">
<div className="absolute top-1/2 left-0 w-full h-0.5 bg-white/10 -translate-y-1/2 z-0" />
{[1, 2, 3, 4].map(s => (
<div key={s} className="relative z-10 flex flex-col items-center gap-2">
<div
className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-500 ${step >= s
? 'bg-primary text-white scale-110 shadow-[0_0_15px_rgba(59,130,246,0.5)]'
: 'bg-slate-800 text-slate-400'
}`}
>
{step > s ? <Check className="w-6 h-6" /> : s}
</div>
<span className={`text-xs font-semibold ${step >= s ? 'text-primary' : 'text-slate-500'}`}>
{s === 1 ? 'Kunde' : s === 2 ? 'Modell' : s === 3 ? 'Software' : 'Abschluss'}
</span>
</div>
<span className={`text-xs font-semibold ${step >= s ? 'text-primary' : 'text-slate-500'}`}>
{s === 1 ? 'Kunde' : s === 2 ? 'Modell' : s === 3 ? 'Software' : 'Abschluss'}
</span>
</div>
))}
))}
</div>
</div>
</div>
)}
<AnimatePresence mode="wait">
{/* ───── Schritt 1: Endkunde wählen / anlegen ───── */}
@@ -1025,6 +1027,28 @@ export function OrderWizard({
<div className="grid md:grid-cols-3 gap-6">
{/* Left: Category sections */}
<div className="md:col-span-2 space-y-8">
{/* Progress Stepper docked above Software wählen */}
<div className="max-w-md mx-auto mb-6">
<div className="flex justify-between relative">
<div className="absolute top-1/2 left-0 w-full h-0.5 bg-white/10 -translate-y-1/2 z-0" />
{[1, 2, 3, 4].map(s => (
<div key={s} className="relative z-10 flex flex-col items-center gap-2">
<div
className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-500 ${step >= s
? 'bg-primary text-white scale-110 shadow-[0_0_15px_rgba(59,130,246,0.5)]'
: 'bg-slate-800 text-slate-400'
}`}
>
{step > s ? <Check className="w-6 h-6" /> : s}
</div>
<span className={`text-xs font-semibold ${step >= s ? 'text-primary' : 'text-slate-500'}`}>
{s === 1 ? 'Kunde' : s === 2 ? 'Modell' : s === 3 ? 'Software' : 'Abschluss'}
</span>
</div>
))}
</div>
</div>
<Card className="glass-dark border-white/10">
<CardHeader>
<CardTitle className="text-2xl flex items-center gap-2 text-white">
@@ -1280,7 +1304,7 @@ export function OrderWizard({
{/* Right: Summary */}
<div className="space-y-6">
<Card className="glass-dark border-primary/20 sticky top-6">
<Card className="glass-dark border-primary/20 sticky top-[20vh]">
<CardHeader>
<CardTitle className="text-white">Zusammenfassung</CardTitle>
</CardHeader>