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

style(wizard): remove header and refine cart sidebar UI/UX
All checks were successful
Staging Build / build (push) Successful in 2m52s
Details

Browse Source
This commit is contained in:
DanielS
2026-08-11 22:30:04 +02:00
parent 6748a3ffad
commit 2f2cba1687
2 changed files with 12 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -256,22 +256,18 @@ export function SummarySidebar({
{err}
</p>
))}
</div>
{/* Kassen-Liste unten (selectable) */}
</div> {/* Warenkorb List (Scrollable) */}
{basketItems.length > 0 && (
<div className="shrink-0 pt-3 pb-2 border-t border-white/10 space-y-2">
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
<div className="flex flex-col gap-2 max-h-32 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
<div className="flex flex-col gap-2 max-h-36 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{basketItems.map((item, idx) => (
<div
key={idx}
className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left bg-slate-900/60 ${
selectedBasketIdx === idx
? 'border-sky-500/50 bg-sky-500/10 text-white shadow-[0_0_12px_rgba(56,189,248,0.15)]'
: idx === editingIdx
? 'border-blue-500/40 bg-blue-500/10 text-white'
: 'border-white/10 text-slate-300 hover:border-white/20 hover:bg-slate-900'
className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left ${
idx === editingIdx
? 'border-primary/50 bg-primary/10 text-white shadow-[0_0_12px_rgba(59,130,246,0.15)]'
: 'border-white/10 bg-slate-900/60 text-slate-300 hover:border-white/20 hover:bg-slate-900'
}`}
>
<div className="flex-1 min-w-0 pr-2">
@@ -282,7 +278,7 @@ export function SummarySidebar({
</span>
</div>
{item.licenseNumber && (
<p className="text-[10px] text-slate-400 truncate mt-0.5">{item.licenseNumber}</p>
<p className="text-[10px] text-slate-400 truncate mt-0.5">Lizenz: {item.licenseNumber}</p>
)}
</div>
<div className="flex items-center gap-1 shrink-0">
@@ -291,7 +287,10 @@ export function SummarySidebar({
variant="ghost"
size="icon"
className="w-6 h-6 hover:bg-primary/20 text-slate-400 hover:text-primary rounded-lg transition-colors"
onClick={() => handleEditBasketItem(idx)}
onClick={() => {
editBasketItem(idx)
setIsOpen(true)
}}
title="Bearbeiten"
>
<Pencil className="w-3 h-3" />
@@ -301,10 +300,7 @@ export function SummarySidebar({
variant="ghost"
size="icon"
className="w-6 h-6 hover:bg-red-500/20 text-slate-400 hover:text-red-400 rounded-lg transition-colors"
onClick={() => {
deleteBasketItem(idx)
if (selectedBasketIdx === idx) setSelectedBasketIdx(null)
}}
onClick={() => deleteBasketItem(idx)}
title="Löschen"
>
<Trash2 className="w-3 h-3" />