103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import type { FormData } from './cost-estimator-form';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { Slider } from '@/components/ui/slider';
|
||
|
|
import React, { useState, useMemo } from 'react';
|
||
|
|
import { Gauge } from 'lucide-react';
|
||
|
|
|
||
|
|
type Step5Props = {
|
||
|
|
onNext: () => void;
|
||
|
|
onBack: () => void;
|
||
|
|
onUpdateData: (data: Partial<FormData>) => void;
|
||
|
|
formData: FormData;
|
||
|
|
};
|
||
|
|
|
||
|
|
const pageLabels = [
|
||
|
|
"less than 5", // 0
|
||
|
|
"5 - 10 pages", // 1
|
||
|
|
"10 - 15 pages", // 2
|
||
|
|
"15 - 20 pages", // 3
|
||
|
|
"20 - 25 pages", // 4
|
||
|
|
"25 - 30 pages", // 5
|
||
|
|
"30 - 35 pages", // 6
|
||
|
|
"35 - 40 pages", // 7
|
||
|
|
"40 - 45 pages", // 8
|
||
|
|
"45 - 50 pages", // 9
|
||
|
|
"50+", // 10
|
||
|
|
];
|
||
|
|
|
||
|
|
const designHoursMap = {
|
||
|
|
custom: 60,
|
||
|
|
mockups: 30,
|
||
|
|
existing: 0,
|
||
|
|
};
|
||
|
|
|
||
|
|
const calculateHours = (pageCount: number, projectStage: number, designProcess: 'custom' | 'mockups' | 'existing' | null): number => {
|
||
|
|
const pageHours = pageCount * 6;
|
||
|
|
const stageHours = Math.round((projectStage / 100) * 50);
|
||
|
|
const designHours = designProcess ? designHoursMap[designProcess] : 0;
|
||
|
|
return pageHours + stageHours + designHours;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
export function Step5PageCount({ onNext, onBack, onUpdateData, formData }: Step5Props) {
|
||
|
|
const [value, setValue] = useState([formData.pageCount]);
|
||
|
|
|
||
|
|
const handleSliderChange = (newValue: number[]) => {
|
||
|
|
setValue(newValue);
|
||
|
|
onUpdateData({ pageCount: newValue[0] });
|
||
|
|
};
|
||
|
|
|
||
|
|
const currentLabel = useMemo(() => {
|
||
|
|
const index = value[0];
|
||
|
|
return pageLabels[index];
|
||
|
|
}, [value]);
|
||
|
|
|
||
|
|
const estimatedHours = useMemo(() => {
|
||
|
|
const pages = value[0] === 10 ? 50 : (value[0] + 1) * 5 - 1; // Approx for calculation
|
||
|
|
return calculateHours(pages, formData.projectStage, formData.designProcess);
|
||
|
|
}, [value, formData.projectStage, formData.designProcess]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col items-start">
|
||
|
|
<h2 className="font-headline text-3xl font-bold tracking-tight text-center w-full">How many pages/screens do you have in mind?</h2>
|
||
|
|
<div className="mt-16 w-full">
|
||
|
|
<div className="flex justify-between items-center mb-4">
|
||
|
|
<p className="font-medium text-muted-foreground">{pageLabels[0]}</p>
|
||
|
|
<p className="font-medium text-muted-foreground">{pageLabels[10]}</p>
|
||
|
|
</div>
|
||
|
|
<Slider
|
||
|
|
defaultValue={value}
|
||
|
|
onValueChange={handleSliderChange}
|
||
|
|
max={10}
|
||
|
|
step={1}
|
||
|
|
className="w-full"
|
||
|
|
/>
|
||
|
|
<div className="text-center text-sm text-muted-foreground mt-2">
|
||
|
|
<span>{currentLabel}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="mt-16 flex w-full items-center justify-between">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Gauge className="h-6 w-6 text-primary" />
|
||
|
|
<span className="font-headline text-lg font-bold">{estimatedHours}+ hours</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<Button variant="ghost" onClick={onBack}>Go Back</Button>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<div className="w-12 h-2 bg-primary rounded-full" />
|
||
|
|
<div className="w-12 h-2 bg-primary rounded-full" />
|
||
|
|
<div className="w-12 h-2 bg-primary rounded-full" />
|
||
|
|
<div className="w-12 h-2 bg-primary rounded-full" />
|
||
|
|
<div className="w-12 h-2 bg-primary rounded-full" />
|
||
|
|
</div>
|
||
|
|
<Button onClick={onNext}>
|
||
|
|
Next
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|