Complete configurator overhaul with premium design
Major Changes: - Replaced static preview with dynamic SVG door visualizer - Integrated Zustand for real-time state management - Redesigned UI with Dark Green (#1A2E2E) and Pistachio (#C4D668) colors - Removed all orange branding (brand-orange) - Premium selection tiles with active/inactive states - Live door rendering that updates instantly on selection Features: - Dynamic SVG draws door based on configuration - Real-time updates: doorType, gridType, finish, handle - Background room image with semi-transparent overlay - Animated "Live Voorbeeld" badge with pulse effect - Configuration info card showing current selections - Premium typography with Inter font Technical: - Added Zustand state management (lib/store.ts) - Created DoorVisualizer component with SVG logic - Updated step-product and step-options with premium tiles - Color swatches for finish selection - Check icons for selected states Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Ubuntu
201
components/configurator/door-visualizer.tsx
Normal file
201
components/configurator/door-visualizer.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
"use client";
|
||||
|
||||
import { useConfiguratorStore } from "@/lib/store";
|
||||
|
||||
export function DoorVisualizer() {
|
||||
const { doorType, gridType, finish, handle } = useConfiguratorStore();
|
||||
|
||||
// Color mapping based on finish
|
||||
const frameColor = {
|
||||
zwart: "#1A1A1A",
|
||||
brons: "#8B6F47",
|
||||
grijs: "#4A5568",
|
||||
}[finish];
|
||||
|
||||
const viewBoxWidth = 400;
|
||||
const viewBoxHeight = 600;
|
||||
const frameThickness = 20;
|
||||
const padding = 40;
|
||||
|
||||
// Door dimensions within viewBox
|
||||
const doorWidth = viewBoxWidth - padding * 2;
|
||||
const doorHeight = viewBoxHeight - padding * 2;
|
||||
const doorX = padding;
|
||||
const doorY = padding;
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-full items-center justify-center overflow-hidden rounded-[2.5rem] bg-gradient-to-br from-slate-100 to-slate-200">
|
||||
{/* Background room image with overlay */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center opacity-20"
|
||||
style={{ backgroundImage: "url(/images/hero.jpg)" }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-white/40" />
|
||||
|
||||
{/* Live Preview Badge */}
|
||||
<div className="absolute left-8 top-8 z-10">
|
||||
<div className="flex items-center gap-2 rounded-full bg-[#1A2E2E] px-4 py-2 text-sm font-semibold text-white shadow-lg">
|
||||
<div className="size-2 animate-pulse rounded-full bg-[#C4D668]" />
|
||||
Live Voorbeeld
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SVG Door */}
|
||||
<svg
|
||||
viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
|
||||
className="relative z-10 h-[90%] w-auto drop-shadow-2xl"
|
||||
>
|
||||
{/* Outer Frame */}
|
||||
<rect
|
||||
x={doorX}
|
||||
y={doorY}
|
||||
width={doorWidth}
|
||||
height={doorHeight}
|
||||
fill={frameColor}
|
||||
stroke={frameColor}
|
||||
strokeWidth="2"
|
||||
rx="4"
|
||||
/>
|
||||
|
||||
{/* Inner panel (lighter) */}
|
||||
<rect
|
||||
x={doorX + frameThickness}
|
||||
y={doorY + frameThickness}
|
||||
width={doorWidth - frameThickness * 2}
|
||||
height={doorHeight - frameThickness * 2}
|
||||
fill={frameColor}
|
||||
opacity="0.7"
|
||||
rx="2"
|
||||
/>
|
||||
|
||||
{/* Grid Lines based on gridType */}
|
||||
{gridType === "3-vlak" && (
|
||||
<>
|
||||
<line
|
||||
x1={doorX + frameThickness}
|
||||
y1={doorY + doorHeight / 3}
|
||||
x2={doorX + doorWidth - frameThickness}
|
||||
y2={doorY + doorHeight / 3}
|
||||
stroke={frameColor}
|
||||
strokeWidth="8"
|
||||
/>
|
||||
<line
|
||||
x1={doorX + frameThickness}
|
||||
y1={doorY + (doorHeight / 3) * 2}
|
||||
x2={doorX + doorWidth - frameThickness}
|
||||
y2={doorY + (doorHeight / 3) * 2}
|
||||
stroke={frameColor}
|
||||
strokeWidth="8"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{gridType === "4-vlak" && (
|
||||
<>
|
||||
<line
|
||||
x1={doorX + frameThickness}
|
||||
y1={doorY + doorHeight / 4}
|
||||
x2={doorX + doorWidth - frameThickness}
|
||||
y2={doorY + doorHeight / 4}
|
||||
stroke={frameColor}
|
||||
strokeWidth="8"
|
||||
/>
|
||||
<line
|
||||
x1={doorX + frameThickness}
|
||||
y1={doorY + doorHeight / 2}
|
||||
x2={doorX + doorWidth - frameThickness}
|
||||
y2={doorY + doorHeight / 2}
|
||||
stroke={frameColor}
|
||||
strokeWidth="8"
|
||||
/>
|
||||
<line
|
||||
x1={doorX + frameThickness}
|
||||
y1={doorY + (doorHeight / 4) * 3}
|
||||
x2={doorX + doorWidth - frameThickness}
|
||||
y2={doorY + (doorHeight / 4) * 3}
|
||||
stroke={frameColor}
|
||||
strokeWidth="8"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Handle based on doorType */}
|
||||
{doorType === "taats" && handle === "u-greep" && (
|
||||
<rect
|
||||
x={doorX + doorWidth / 2 - 6}
|
||||
y={doorY + doorHeight / 2 - 80}
|
||||
width="12"
|
||||
height="160"
|
||||
fill="#B8860B"
|
||||
rx="6"
|
||||
/>
|
||||
)}
|
||||
|
||||
{doorType === "scharnier" && handle === "klink" && (
|
||||
<>
|
||||
{/* Handle base */}
|
||||
<rect
|
||||
x={doorX + doorWidth - frameThickness - 50}
|
||||
y={doorY + doorHeight / 2 - 8}
|
||||
width="40"
|
||||
height="16"
|
||||
fill="#B8860B"
|
||||
rx="8"
|
||||
/>
|
||||
{/* Handle knob */}
|
||||
<circle
|
||||
cx={doorX + doorWidth - frameThickness - 30}
|
||||
cy={doorY + doorHeight / 2}
|
||||
r="6"
|
||||
fill="#8B6F47"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{doorType === "paneel" && (
|
||||
<>
|
||||
{/* Central vertical line for paneel */}
|
||||
<line
|
||||
x1={doorX + doorWidth / 2}
|
||||
y1={doorY + frameThickness}
|
||||
x2={doorX + doorWidth / 2}
|
||||
y2={doorY + doorHeight - frameThickness}
|
||||
stroke={frameColor}
|
||||
strokeWidth="8"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</svg>
|
||||
|
||||
{/* Configuration Info Card */}
|
||||
<div className="absolute bottom-8 left-8 right-8 z-10">
|
||||
<div className="rounded-2xl bg-white/90 p-4 shadow-lg backdrop-blur-sm">
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<div>
|
||||
<div className="text-xs font-medium text-gray-500">Type</div>
|
||||
<div className="font-semibold capitalize text-[#1A2E2E]">
|
||||
{doorType}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs font-medium text-gray-500">Verdeling</div>
|
||||
<div className="font-semibold text-[#1A2E2E]">{gridType}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs font-medium text-gray-500">Afwerking</div>
|
||||
<div className="font-semibold capitalize text-[#1A2E2E]">
|
||||
{finish}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs font-medium text-gray-500">Greep</div>
|
||||
<div className="font-semibold capitalize text-[#1A2E2E]">
|
||||
{handle}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,68 +1,142 @@
|
||||
"use client";
|
||||
|
||||
import { useFormContext } from "@/components/offerte/form-context";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { glassTypes, finishTypes } from "@/lib/validators";
|
||||
import { Paintbrush, GlassWater } from "lucide-react";
|
||||
import { useConfiguratorStore, type Finish, type Handle } from "@/lib/store";
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
const finishOptions: Array<{
|
||||
value: Finish;
|
||||
label: string;
|
||||
description: string;
|
||||
}> = [
|
||||
{ value: "zwart", label: "Mat Zwart", description: "Klassiek en tijdloos" },
|
||||
{
|
||||
value: "brons",
|
||||
label: "Brons",
|
||||
description: "Warm en industrieel",
|
||||
},
|
||||
{ value: "grijs", label: "Antraciet", description: "Modern en neutraal" },
|
||||
];
|
||||
|
||||
const handleOptions: Array<{
|
||||
value: Handle;
|
||||
label: string;
|
||||
description: string;
|
||||
}> = [
|
||||
{
|
||||
value: "u-greep",
|
||||
label: "U-Greep",
|
||||
description: "Verticale greep voor taatsdeur",
|
||||
},
|
||||
{ value: "klink", label: "Klink", description: "Klassieke deurklink" },
|
||||
{ value: "geen", label: "Geen greep", description: "Voor vaste panelen" },
|
||||
];
|
||||
|
||||
export function StepOptions() {
|
||||
const { formData, updateData } = useFormContext();
|
||||
const { finish, handle, setFinish, setHandle } = useConfiguratorStore();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="mb-2 text-xl font-semibold">Opties</h2>
|
||||
<p className="mb-6 text-sm text-muted-foreground">
|
||||
Kies de afwerking en het glastype voor uw product.
|
||||
</p>
|
||||
<div className="space-y-8">
|
||||
{/* Finish Selection */}
|
||||
<div>
|
||||
<h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Afwerking</h2>
|
||||
<p className="mb-4 text-sm text-gray-600">
|
||||
Kies de kleur en afwerking van het staal.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-8 sm:grid-cols-2">
|
||||
{/* Glass Type */}
|
||||
<div className="space-y-4">
|
||||
<Label className="flex items-center gap-2 text-base font-semibold">
|
||||
<GlassWater className="size-4 text-brand-orange" />
|
||||
Glas Type
|
||||
</Label>
|
||||
<RadioGroup
|
||||
value={formData.glassType ?? ""}
|
||||
onValueChange={(val) => updateData({ glassType: val as typeof formData.glassType })}
|
||||
className="space-y-2"
|
||||
>
|
||||
{glassTypes.map((type) => (
|
||||
<Label
|
||||
key={type}
|
||||
htmlFor={`glass-${type}`}
|
||||
className="flex cursor-pointer items-center gap-3 rounded-lg border border-border p-4 transition-colors has-[[data-state=checked]]:border-brand-orange has-[[data-state=checked]]:bg-brand-orange/5"
|
||||
<div className="grid gap-3">
|
||||
{finishOptions.map((option) => {
|
||||
const selected = finish === option.value;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => setFinish(option.value)}
|
||||
className={`group relative rounded-xl border-2 p-4 text-left transition-all ${
|
||||
selected
|
||||
? "border-[#C4D668] bg-[#1A2E2E] text-white"
|
||||
: "border-gray-200 bg-white text-gray-900 hover:border-[#1A2E2E]/30"
|
||||
}`}
|
||||
>
|
||||
<RadioGroupItem value={type} id={`glass-${type}`} />
|
||||
<span className="text-sm font-medium">{type}</span>
|
||||
</Label>
|
||||
))}
|
||||
</RadioGroup>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex flex-1 items-center gap-4">
|
||||
{/* Color swatch */}
|
||||
<div
|
||||
className="size-10 rounded-lg border-2 border-white shadow-md"
|
||||
style={{
|
||||
backgroundColor:
|
||||
option.value === "zwart"
|
||||
? "#1A1A1A"
|
||||
: option.value === "brons"
|
||||
? "#8B6F47"
|
||||
: "#4A5568",
|
||||
}}
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold">{option.label}</h3>
|
||||
<p
|
||||
className={`mt-1 text-sm ${
|
||||
selected ? "text-white/80" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{option.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{selected && (
|
||||
<div className="flex size-6 items-center justify-center rounded-full bg-[#C4D668]">
|
||||
<Check className="size-4 text-[#1A2E2E]" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Finish */}
|
||||
<div className="space-y-4">
|
||||
<Label className="flex items-center gap-2 text-base font-semibold">
|
||||
<Paintbrush className="size-4 text-brand-orange" />
|
||||
Afwerking
|
||||
</Label>
|
||||
<RadioGroup
|
||||
value={formData.finish ?? ""}
|
||||
onValueChange={(val) => updateData({ finish: val as typeof formData.finish })}
|
||||
className="space-y-2"
|
||||
>
|
||||
{finishTypes.map((type) => (
|
||||
<Label
|
||||
key={type}
|
||||
htmlFor={`finish-${type}`}
|
||||
className="flex cursor-pointer items-center gap-3 rounded-lg border border-border p-4 transition-colors has-[[data-state=checked]]:border-brand-orange has-[[data-state=checked]]:bg-brand-orange/5"
|
||||
{/* Handle Selection */}
|
||||
<div>
|
||||
<h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Greep</h2>
|
||||
<p className="mb-4 text-sm text-gray-600">
|
||||
Selecteer het type handgreep.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-3">
|
||||
{handleOptions.map((option) => {
|
||||
const selected = handle === option.value;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => setHandle(option.value)}
|
||||
className={`group relative rounded-xl border-2 p-4 text-left transition-all ${
|
||||
selected
|
||||
? "border-[#C4D668] bg-[#1A2E2E] text-white"
|
||||
: "border-gray-200 bg-white text-gray-900 hover:border-[#1A2E2E]/30"
|
||||
}`}
|
||||
>
|
||||
<RadioGroupItem value={type} id={`finish-${type}`} />
|
||||
<span className="text-sm font-medium">{type}</span>
|
||||
</Label>
|
||||
))}
|
||||
</RadioGroup>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold">{option.label}</h3>
|
||||
<p
|
||||
className={`mt-1 text-sm ${
|
||||
selected ? "text-white/80" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{option.description}
|
||||
</p>
|
||||
</div>
|
||||
{selected && (
|
||||
<div className="flex size-6 items-center justify-center rounded-full bg-[#C4D668]">
|
||||
<Check className="size-4 text-[#1A2E2E]" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,79 +1,157 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useConfiguratorStore, type DoorType } from "@/lib/store";
|
||||
import { useFormContext } from "@/components/offerte/form-context";
|
||||
import { productTypes } from "@/lib/validators";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
const productImages: Record<string, string> = {
|
||||
Taatsdeur: "/images/taats.jpg",
|
||||
Scharnierdeur: "/images/scharnier.jpg",
|
||||
"Vast Paneel": "/images/paneel.jpg",
|
||||
};
|
||||
const doorTypes: Array<{
|
||||
value: DoorType;
|
||||
label: string;
|
||||
description: string;
|
||||
}> = [
|
||||
{
|
||||
value: "taats",
|
||||
label: "Taatsdeur",
|
||||
description: "Pivoterende deur met verticaal draaimechanisme",
|
||||
},
|
||||
{
|
||||
value: "scharnier",
|
||||
label: "Scharnierdeur",
|
||||
description: "Klassieke deur met zijscharnieren",
|
||||
},
|
||||
{
|
||||
value: "paneel",
|
||||
label: "Vast Paneel",
|
||||
description: "Vast glaspaneel zonder bewegend mechanisme",
|
||||
},
|
||||
];
|
||||
|
||||
const productDescriptions: Record<string, string> = {
|
||||
Taatsdeur: "Pivoterende deur",
|
||||
Scharnierdeur: "Klassiek scharnier",
|
||||
"Vast Paneel": "Vast glaspaneel",
|
||||
};
|
||||
const gridTypes: Array<{
|
||||
value: "3-vlak" | "4-vlak" | "geen";
|
||||
label: string;
|
||||
description: string;
|
||||
}> = [
|
||||
{ value: "geen", label: "Geen verdeling", description: "Volledig vlak" },
|
||||
{ value: "3-vlak", label: "3-vlaks", description: "2 horizontale balken" },
|
||||
{ value: "4-vlak", label: "4-vlaks", description: "3 horizontale balken" },
|
||||
];
|
||||
|
||||
export function StepProduct() {
|
||||
const { formData, updateData, nextStep } = useFormContext();
|
||||
const { nextStep } = useFormContext();
|
||||
const { doorType, gridType, setDoorType, setGridType } =
|
||||
useConfiguratorStore();
|
||||
|
||||
function select(type: (typeof productTypes)[number]) {
|
||||
updateData({ productType: type });
|
||||
function handleDoorTypeSelect(type: DoorType) {
|
||||
setDoorType(type);
|
||||
}
|
||||
|
||||
function handleGridTypeSelect(type: "3-vlak" | "4-vlak" | "geen") {
|
||||
setGridType(type);
|
||||
}
|
||||
|
||||
function handleContinue() {
|
||||
nextStep();
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="mb-2 text-xl font-semibold">Kies uw product</h2>
|
||||
<p className="mb-6 text-sm text-muted-foreground">
|
||||
Selecteer het type stalen element dat u wilt configureren.
|
||||
</p>
|
||||
<div className="space-y-8">
|
||||
{/* Door Type Selection */}
|
||||
<div>
|
||||
<h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Kies uw deurtype</h2>
|
||||
<p className="mb-4 text-sm text-gray-600">
|
||||
Selecteer het type stalen deur dat u wilt configureren.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
{productTypes.map((type) => {
|
||||
const selected = formData.productType === type;
|
||||
<div className="grid gap-3">
|
||||
{doorTypes.map((type) => {
|
||||
const selected = doorType === type.value;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={type}
|
||||
type="button"
|
||||
onClick={() => select(type)}
|
||||
className={cn(
|
||||
"group relative aspect-[3/4] overflow-hidden text-left transition-all",
|
||||
selected
|
||||
? "ring-4 ring-brand-orange ring-offset-2"
|
||||
: "ring-0 hover:ring-2 hover:ring-brand-orange/40 hover:ring-offset-1"
|
||||
)}
|
||||
>
|
||||
{/* Image fills entire card */}
|
||||
<Image
|
||||
src={productImages[type]}
|
||||
alt={type}
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
|
||||
{/* Bottom gradient with label */}
|
||||
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-4 pb-5 pt-16">
|
||||
<p className="text-xs font-medium uppercase tracking-wider text-white/60">
|
||||
{productDescriptions[type]}
|
||||
</p>
|
||||
<h3 className="mt-1 text-lg font-semibold text-white">
|
||||
{type}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Selected state overlay */}
|
||||
{selected && (
|
||||
<div className="absolute inset-0 border-4 border-brand-orange" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<button
|
||||
key={type.value}
|
||||
type="button"
|
||||
onClick={() => handleDoorTypeSelect(type.value)}
|
||||
className={`group relative rounded-xl border-2 p-4 text-left transition-all ${
|
||||
selected
|
||||
? "border-[#C4D668] bg-[#1A2E2E] text-white"
|
||||
: "border-gray-200 bg-white text-gray-900 hover:border-[#1A2E2E]/30"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold">{type.label}</h3>
|
||||
<p
|
||||
className={`mt-1 text-sm ${
|
||||
selected ? "text-white/80" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{type.description}
|
||||
</p>
|
||||
</div>
|
||||
{selected && (
|
||||
<div className="flex size-6 items-center justify-center rounded-full bg-[#C4D668]">
|
||||
<Check className="size-4 text-[#1A2E2E]" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid Type Selection */}
|
||||
<div>
|
||||
<h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Verdeling</h2>
|
||||
<p className="mb-4 text-sm text-gray-600">
|
||||
Kies het aantal horizontale vlakken.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-3">
|
||||
{gridTypes.map((type) => {
|
||||
const selected = gridType === type.value;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={type.value}
|
||||
type="button"
|
||||
onClick={() => handleGridTypeSelect(type.value)}
|
||||
className={`group relative rounded-xl border-2 p-4 text-left transition-all ${
|
||||
selected
|
||||
? "border-[#C4D668] bg-[#1A2E2E] text-white"
|
||||
: "border-gray-200 bg-white text-gray-900 hover:border-[#1A2E2E]/30"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold">{type.label}</h3>
|
||||
<p
|
||||
className={`mt-1 text-sm ${
|
||||
selected ? "text-white/80" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{type.description}
|
||||
</p>
|
||||
</div>
|
||||
{selected && (
|
||||
<div className="flex size-6 items-center justify-center rounded-full bg-[#C4D668]">
|
||||
<Check className="size-4 text-[#1A2E2E]" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Continue Button */}
|
||||
<button
|
||||
onClick={handleContinue}
|
||||
className="w-full rounded-xl bg-[#C4D668] py-3 font-bold text-[#1A2E2E] transition-all hover:bg-[#b5c75a]"
|
||||
>
|
||||
Volgende stap
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user