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

feat(wizard): add directional slide animations

Browse Source
This commit is contained in:
DanielS
2026-08-11 22:08:47 +02:00
parent 1c67cd46bb
commit 9078b5631a
1 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -94,6 +94,7 @@ export function OrderWizard({
const router = useRouter()
// Upgrade-Mode: starte direkt bei Schritt 3 (Software)
const [step, setStep] = useState(upgradeMode ? 3 : (initialOrder ? 3 : 1))
const [direction, setDirection] = useState(1)
const [isSubmitting, setIsSubmitting] = useState(false)
const [selectedCompanyId, setSelectedCompanyId] = useState<string | null>(
initialOrder?.company_id ?? (isAdmin ? 'all' : null)
@@ -543,10 +544,12 @@ export function OrderWizard({
addToBasket()
}
}
setDirection(1)
setStep(s => s + 1)
}
const prevStep = () => {
setDirection(-1)
setStep(s => s - 1)
}
@@ -848,7 +851,7 @@ export function OrderWizard({
{/* Dynamic Header */}
{step !== 3 && (
<div className="text-center mb-12">
<h1 className="text-5xl font-extrabold tracking-tight mb-4 text-gradient">
<h1 className="text-5xl font-extrabold tracking-tight mb-4 text-white">
Konfigurieren Sie Ihre Lösung
</h1>
<p className="text-slate-400 text-lg max-w-2xl mx-auto">
@@ -869,9 +872,9 @@ export function OrderWizard({
{step === 1 && (
<motion.div
key="step1"
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: direction * -20 }}
className="space-y-6"
>
<StepCustomer
@@ -900,9 +903,9 @@ export function OrderWizard({
{step === 2 && (
<motion.div
key="step2"
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: direction * -20 }}
className="space-y-6"
>
<StepBilling
@@ -921,9 +924,9 @@ export function OrderWizard({
{step === 3 && (
<motion.div
key="step3"
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: direction * -20 }}
className="h-[calc(100vh-140px)] overflow-hidden"
>
<div className="grid grid-cols-1 lg:grid-cols-6 gap-6 h-full items-stretch">
@@ -931,7 +934,7 @@ export function OrderWizard({
{/* LEFT: Categories Sidebar Menu */}
<div className="lg:col-span-2 flex flex-col justify-start pr-4 space-y-6">
<div>
<h1 className="text-3xl font-extrabold tracking-tight mb-2 text-gradient">
<h1 className="text-3xl font-extrabold tracking-tight mb-2 text-white">
Konfigurieren Sie Ihre Lösung
</h1>
<p className="text-slate-400 text-sm">
@@ -1108,9 +1111,9 @@ export function OrderWizard({
{step === 4 && (
<motion.div
key="step4"
initial={{ opacity: 0, scale: 0.98 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.98 }}
initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: direction * -20 }}
className="h-[calc(100vh-140px)] overflow-hidden w-full"
>
<StepSummary