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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user