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

feat(wizard): add eye-catcher shake animation for missing required categories
All checks were successful
Staging Build / build (push) Successful in 3m41s
Details

Browse Source
This commit is contained in:
DanielS
2026-08-18 16:43:22 +02:00
parent 9dbbbb8b31
commit ea1906f9e4
3 changed files with 96 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -933,26 +933,42 @@ export function OrderWizard({
const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
const isRequired = cat.is_required
const isActive = activeCategoryId === cat.id
const isMissingRequired = isRequired && !hasSelection
return (
<button
key={cat.id}
onClick={() => setActiveCategoryId(cat.id)}
className={`flex items-center gap-2.5 p-2.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${isActive
? 'bg-primary/10 border-primary text-white shadow-[0_0_15px_rgba(59,130,246,0.2)]'
: 'bg-slate-900/50 border-white/5 text-slate-400 hover:bg-slate-900 hover:border-white/20 hover:text-white'
className={`flex items-center gap-2.5 p-2.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${
isMissingRequired
? 'animate-eye-catcher bg-red-500/10 border-red-500 text-red-400 font-bold shadow-[0_0_20px_rgba(239,68,68,0.4)]'
: isActive
? 'bg-primary/10 border-primary text-white shadow-[0_0_15px_rgba(59,130,246,0.2)]'
: 'bg-slate-900/50 border-white/5 text-slate-400 hover:bg-slate-900 hover:border-white/20 hover:text-white'
}`}
>
{isActive && (
{isActive && !isMissingRequired && (
<div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
)}
<div className={`p-1.5 rounded-lg transition-colors ${isActive ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400 group-hover:text-white'}`}>
<div className={`p-1.5 rounded-lg transition-colors ${
isMissingRequired
? 'bg-red-500/20 text-red-400'
: isActive
? 'bg-primary/20 text-primary'
: 'bg-white/5 text-slate-400 group-hover:text-white'
}`}>
<CategoryIcon icon={cat.icon} className="w-3.5 h-3.5" />
</div>
<div className="flex-1 min-w-0">
<p className={`text-xs font-semibold truncate ${isActive ? 'text-white' : 'text-slate-300 group-hover:text-white'}`}>
<p className={`text-xs font-semibold truncate ${
isMissingRequired
? 'text-red-300 font-bold'
: isActive
? 'text-white'
: 'text-slate-300 group-hover:text-white'
}`}>
{cat.name}
</p>
</div>
@@ -962,8 +978,8 @@ export function OrderWizard({
✓
</span>
) : isRequired ? (
<span className="text-[9px] px-1.5 py-0.2 rounded-full font-semibold shrink-0 border border-amber-500/30 text-amber-400 bg-amber-500/10">
!
<span className="text-[9px] px-2 py-0.5 rounded-full font-extrabold shrink-0 border border-red-500 text-red-400 bg-red-500/20 animate-pulse tracking-wider">
FEHLT!
</span>
) : null}
</button>