on this step , make the whole box clickable ... not just the checkbox

This commit is contained in:
Leon Serfaty G
2025-07-18 04:43:55 +00:00
parent 020169eb79
commit 2d2d283588
@@ -83,9 +83,9 @@ export function Step9AdditionalFeatures({ onNext, onBack, onUpdateData, formData
<h2 className="font-headline text-3xl font-bold tracking-tight text-center">Would you like us to develop any additional features?</h2> <h2 className="font-headline text-3xl font-bold tracking-tight text-center">Would you like us to develop any additional features?</h2>
<div className="mt-8 grid w-full grid-cols-1 gap-4 md:grid-cols-2"> <div className="mt-8 grid w-full grid-cols-1 gap-4 md:grid-cols-2">
{features.map((feature) => ( {features.map((feature) => (
<div <Label
key={feature.id} key={feature.id}
onClick={() => handleSelect(feature.id)} htmlFor={feature.id}
className={`flex items-center space-x-3 rounded-lg border p-4 cursor-pointer transition-all ${selectedFeatures.includes(feature.id) ? 'border-primary bg-primary/5' : 'border-border'}`} className={`flex items-center space-x-3 rounded-lg border p-4 cursor-pointer transition-all ${selectedFeatures.includes(feature.id) ? 'border-primary bg-primary/5' : 'border-border'}`}
> >
<Checkbox <Checkbox
@@ -93,11 +93,11 @@ export function Step9AdditionalFeatures({ onNext, onBack, onUpdateData, formData
checked={selectedFeatures.includes(feature.id)} checked={selectedFeatures.includes(feature.id)}
onCheckedChange={() => handleSelect(feature.id)} onCheckedChange={() => handleSelect(feature.id)}
/> />
<Label htmlFor={feature.id} className="text-base font-medium flex-1 cursor-pointer">{feature.label}</Label> <span className="text-base font-medium flex-1">{feature.label}</span>
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<button type="button" className="text-muted-foreground hover:text-foreground"> <button type="button" className="text-muted-foreground hover:text-foreground" onClick={(e) => e.preventDefault()}>
<Info className="h-4 w-4" /> <Info className="h-4 w-4" />
</button> </button>
</TooltipTrigger> </TooltipTrigger>
@@ -106,7 +106,7 @@ export function Step9AdditionalFeatures({ onNext, onBack, onUpdateData, formData
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
</div> </Label>
))} ))}
</div> </div>
<div className="mt-16 flex w-full items-center justify-between"> <div className="mt-16 flex w-full items-center justify-between">