75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState, useTransition } from 'react';
|
||
|
|
import { Step1ProjectType } from './step-1-project-type';
|
||
|
|
import { Card, CardContent } from '@/components/ui/card';
|
||
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
||
|
|
|
||
|
|
export type FormData = {
|
||
|
|
projectType: 'website' | 'mobile-app' | 'platform' | null;
|
||
|
|
// Add more fields for subsequent steps
|
||
|
|
};
|
||
|
|
|
||
|
|
export function CostEstimatorForm() {
|
||
|
|
const [currentStep, setCurrentStep] = useState(1);
|
||
|
|
const [formData, setFormData] = useState<FormData>({
|
||
|
|
projectType: null,
|
||
|
|
});
|
||
|
|
const [isPending, startTransition] = useTransition();
|
||
|
|
|
||
|
|
const handleNextStep = () => {
|
||
|
|
startTransition(() => {
|
||
|
|
setCurrentStep((prev) => prev + 1);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleUpdateFormData = (newData: Partial<FormData>) => {
|
||
|
|
setFormData((prev) => ({ ...prev, ...newData }));
|
||
|
|
};
|
||
|
|
|
||
|
|
const renderStep = () => {
|
||
|
|
switch (currentStep) {
|
||
|
|
case 1:
|
||
|
|
return (
|
||
|
|
<Step1ProjectType
|
||
|
|
onNext={handleNextStep}
|
||
|
|
onUpdateData={handleUpdateFormData}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
case 2:
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col items-center text-center">
|
||
|
|
<h2 className="font-headline text-3xl font-bold tracking-tight">Step 2: Define Your Project</h2>
|
||
|
|
<p className="mt-2 text-muted-foreground">This is where AI will help you define scope.</p>
|
||
|
|
<p className="mt-4 text-sm font-medium">You selected: <span className="text-primary">{formData.projectType}</span></p>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
default:
|
||
|
|
return (
|
||
|
|
<Step1ProjectType
|
||
|
|
onNext={handleNextStep}
|
||
|
|
onUpdateData={handleUpdateFormData}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card className="mt-8 w-full max-w-4xl shadow-2xl overflow-hidden">
|
||
|
|
<CardContent className="p-4 sm:p-8">
|
||
|
|
<AnimatePresence mode="wait">
|
||
|
|
<motion.div
|
||
|
|
key={currentStep}
|
||
|
|
initial={{ opacity: 0, x: 50 }}
|
||
|
|
animate={{ opacity: 1, x: 0 }}
|
||
|
|
exit={{ opacity: 0, x: -50 }}
|
||
|
|
transition={{ duration: 0.3 }}
|
||
|
|
>
|
||
|
|
{renderStep()}
|
||
|
|
</motion.div>
|
||
|
|
</AnimatePresence>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|