40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import { Check } from 'lucide-react'
|
|
|
|
interface ProgressStepperProps {
|
|
step: number
|
|
basketItemsCount: number
|
|
}
|
|
|
|
export function ProgressStepper({ step, basketItemsCount }: ProgressStepperProps) {
|
|
return (
|
|
<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-blue-600 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-5 h-5" /> : s}
|
|
</div>
|
|
<span className={`text-xs font-semibold ${step >= s ? 'text-blue-400' : 'text-slate-500'} flex items-center gap-1`}>
|
|
{s === 1 ? 'Kunde' : s === 2 ? 'Modell' : s === 3 ? 'Software' : 'Abschluss'}
|
|
{s === 3 && basketItemsCount > 0 && (
|
|
<span className="bg-blue-600 text-white text-[9px] w-4 h-4 rounded-full flex items-center justify-center font-bold px-1.5 leading-none">
|
|
{basketItemsCount}
|
|
</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|