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

23
shop/components/wizard/summary-sidebar.tsx
View File

@@ -253,14 +253,14 @@ export function SummarySidebar({
{/* Kassen-Liste unten (selectable) */}
{basketItems.length > 0 && (
<div className="shrink-0 pt-3 border-t border-white/10 space-y-2">
<div className="shrink-0 pt-3 pb-2 mb-4 border-t border-white/10 space-y-3">
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
<div className="flex flex-wrap gap-1.5 max-h-28 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
<div className="flex flex-wrap gap-2 max-h-36 overflow-y-auto pr-1 pb-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
{basketItems.map((item, idx) => (
<button
key={idx}
onClick={() => setSelectedBasketIdx(selectedBasketIdx === idx ? null : idx)}
className={`flex items-center gap-2 text-xs px-3 py-2 rounded-lg border transition-all duration-200 text-left group ${
className={`flex items-center gap-2 text-xs px-3 py-2.5 rounded-lg border transition-all duration-200 text-left group ${
selectedBasketIdx === idx
? 'bg-sky-500/15 border-sky-500/40 text-white shadow-[0_0_10px_rgba(56,189,248,0.15)]'
: idx === editingIdx
@@ -278,7 +278,7 @@ export function SummarySidebar({
{/* Selected basket item actions */}
{selectedBasketIdx !== null && basketItems[selectedBasketIdx] && (
<div className="flex items-center gap-2 pt-1">
<div className="flex items-center gap-2 pt-2 border-t border-white/5">
<div className="flex-1 min-w-0">
<p className="text-xs text-white font-medium truncate">{basketItems[selectedBasketIdx].deviceName}</p>
<p className="text-[10px] text-slate-500 capitalize">
@@ -314,25 +314,24 @@ export function SummarySidebar({
</div>
)}
</CardContent>
<CardFooter className="flex flex-col gap-3 shrink-0">
<CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-0">
<Button
type="button"
variant="outline"
className="w-full border-sky-500/30 text-white hover:bg-sky-500/10 gap-2 h-10 text-sm"
className="w-full border-sky-500/40 bg-sky-500/10 text-sky-200 hover:bg-sky-500/20 hover:text-white gap-2 h-9 text-xs font-semibold shadow-sm"
onClick={() => setIsOpen(true)}
disabled={isNextStepDisabled}
disabled={!hasActiveSelection && isNextStepDisabled}
>
<UserPlus className="w-4 h-4" /> {editingIdx !== null ? '💾 Kasse bearbeiten' : (hasActiveSelection ? 'Kasse speichern' : 'Kasse anlegen')}
<UserPlus className="w-3.5 h-3.5" /> {editingIdx !== null ? '💾 Kasse bearbeiten' : (hasActiveSelection ? 'Kasse speichern' : '+ Kasse anlegen')}
</Button>
<Separator className="bg-white/10 my-1" />
<Button
className="w-full h-12 text-lg"
className="w-full h-10 text-sm font-bold bg-gradient-to-r from-blue-600 to-sky-500 hover:from-blue-500 hover:to-sky-400"
onClick={nextStep}
disabled={basketItems.length === 0 && isNextStepDisabled}
>
Weiter <ChevronRight className="ml-2 w-5 h-5" />
Weiter <ChevronRight className="ml-1 w-4 h-4" />
</Button>
<Button variant="ghost" className="w-full text-white" onClick={prevStep}>
<Button variant="ghost" className="w-full text-slate-400 hover:text-white h-8 text-xs" onClick={prevStep}>
Zurück zum Abrechnungsmodell
</Button>
</CardFooter>