74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { motion } from 'framer-motion'
|
|
import { Check } from 'lucide-react'
|
|
|
|
interface ProgressStepperProps {
|
|
step: number
|
|
basketItemsCount: number
|
|
}
|
|
|
|
const STEP_LABELS = ['Kunde', 'Modell', 'Software', 'Abschluss']
|
|
|
|
export function ProgressStepper({ step, basketItemsCount }: ProgressStepperProps) {
|
|
// Calculate progress percentage for active line (Step 1: 0%, Step 2: 33.3%, Step 3: 66.6%, Step 4: 100%)
|
|
const progressPercent = ((step - 1) / 3) * 100
|
|
|
|
return (
|
|
<div className="max-w-xl mx-auto mb-10 px-4">
|
|
<div className="flex justify-between relative">
|
|
{/* Static Background Line */}
|
|
<div className="absolute top-[20px] left-[10%] right-[10%] h-[2px] bg-slate-800 z-0 rounded-full" />
|
|
|
|
{/* Animated Active Line (bg-sky-500) */}
|
|
<motion.div
|
|
className="absolute top-[20px] left-[10%] h-[2px] bg-gradient-to-r from-blue-600 via-sky-400 to-cyan-400 z-0 rounded-full shadow-[0_0_12px_rgba(56,189,248,0.8)]"
|
|
initial={{ width: '0%' }}
|
|
animate={{ width: `${progressPercent * 0.8}%` }}
|
|
transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
|
|
/>
|
|
|
|
{[1, 2, 3, 4].map(s => {
|
|
const isDone = step > s
|
|
const isActive = step === s
|
|
|
|
return (
|
|
<div key={s} className="relative z-10 flex flex-col items-center gap-2">
|
|
<motion.div
|
|
initial={false}
|
|
animate={{
|
|
scale: isActive ? 1.15 : 1,
|
|
}}
|
|
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
|
|
className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-300 ${
|
|
isDone
|
|
? 'bg-sky-500 text-slate-950 shadow-[0_0_15px_rgba(56,189,248,0.6)] border-2 border-sky-400'
|
|
: isActive
|
|
? 'bg-slate-950 border-2 border-sky-400 text-sky-400 shadow-[0_0_20px_rgba(56,189,248,0.7)]'
|
|
: 'bg-slate-900 border-2 border-slate-800 text-slate-500'
|
|
}`}
|
|
>
|
|
{isDone ? <Check className="w-5 h-5 stroke-[3]" /> : s}
|
|
</motion.div>
|
|
|
|
<span
|
|
className={`text-xs font-semibold tracking-wide transition-colors duration-300 flex items-center gap-1.5 ${
|
|
isActive || isDone ? 'text-sky-300' : 'text-slate-500'
|
|
}`}
|
|
>
|
|
{STEP_LABELS[s - 1]}
|
|
{s === 3 && basketItemsCount > 0 && (
|
|
<span className="bg-sky-500 text-slate-950 text-[10px] w-4 h-4 rounded-full flex items-center justify-center font-extrabold shadow-sm">
|
|
{basketItemsCount}
|
|
</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|