import React, { useMemo, useState } from “react”;
\nimport { motion } from “framer-motion”;
\nimport { Plus, Trash2, RotateCcw, Ruler, Euro, Download, Home } from “lucide-react”;
\nimport { Button } from “@\/components\/ui\/button”;
\nimport { Card, CardContent } from “@\/components\/ui\/card”;<\/p>\n
const MODULES = [
\n { id: “base60”, name: “Onderkast 60”, width: 60, depth: 60, price: 240, type: “Onderkast” },
\n { id: “base80”, name: “Onderkast 80”, width: 80, depth: 60, price: 310, type: “Onderkast” },
\n { id: “sink80”, name: “Spoelkast 80”, width: 80, depth: 60, price: 390, type: “Spoelzone” },
\n { id: “hob60”, name: “Kookplaatkast 60”, width: 60, depth: 60, price: 430, type: “Kookzone” },
\n { id: “drawer90”, name: “Ladekast 90”, width: 90, depth: 60, price: 520, type: “Opbergen” },
\n { id: “tall60”, name: “Hoge kast 60”, width: 60, depth: 60, price: 690, type: “Hoge kast” },
\n { id: “fridge60”, name: “Koelkastkast 60”, width: 60, depth: 60, price: 850, type: “Apparatuur” },
\n { id: “oven60”, name: “Ovenkast 60”, width: 60, depth: 60, price: 760, type: “Apparatuur” },
\n];<\/p>\n
const LAYOUTS = [
\n { id: “straight”, label: “Rechte keuken”, description: “Alle modules langs \u00e9\u00e9n wand.” },
\n { id: “lshape”, label: “L-keuken”, description: “Modules verdeeld over twee wanden.” },
\n { id: “island”, label: “Keuken met eiland”, description: “Wandopstelling plus los eiland.” },
\n];<\/p>\n
function currency(value) {
\n return new Intl.NumberFormat(“nl-NL”, { style: “currency”, currency: “EUR”, maximumFractionDigits: 0 }).format(value);
\n}<\/p>\n
function fitStatus(totalWidth, roomWidth) {
\n if (totalWidth <= roomWidth) return { label: \"Past\", tone: \"bg-emerald-100 text-emerald-800\" };\n return { label: \"Te breed\", tone: \"bg-red-100 text-red-800\" };\n}\n\nexport default function KitchenDesigner() {\n const [roomWidth, setRoomWidth] = useState(360);\n const [roomDepth, setRoomDepth] = useState(260);\n const [layout, setLayout] = useState(\"straight\");\n const [selectedType, setSelectedType] = useState(\"Alles\");\n const [items, setItems] = useState([\n { uid: crypto.randomUUID(), ...MODULES[1], zone: \"wand\" },\n { uid: crypto.randomUUID(), ...MODULES[2], zone: \"wand\" },\n { uid: crypto.randomUUID(), ...MODULES[3], zone: \"wand\" },\n ]);\n\n const filteredModules = useMemo(() => {
\n if (selectedType === “Alles”) return MODULES;
\n return MODULES.filter((m) => m.type === selectedType);
\n }, [selectedType]);<\/p>\n
const totalWidth = items.filter((i) => i.zone === “wand”).reduce((sum, i) => sum + i.width, 0);
\n const islandWidth = items.filter((i) => i.zone === “eiland”).reduce((sum, i) => sum + i.width, 0);
\n const cabinetsPrice = items.reduce((sum, i) => sum + i.price, 0);
\n const worktopPrice = Math.ceil((totalWidth + islandWidth) \/ 100) * 180;
\n const installPrice = Math.max(850, Math.ceil(items.length * 115));
\n const totalPrice = cabinetsPrice + worktopPrice + installPrice;
\n const status = fitStatus(totalWidth, roomWidth);<\/p>\n
const addModule = (module) => {
\n const zone = layout === “island” && [“drawer90”, “base80”, “base60”].includes(module.id) && islandWidth < 180 ? \"eiland\" : \"wand\";\n setItems((prev) => […prev, { uid: crypto.randomUUID(), …module, zone }]);
\n };<\/p>\n
const removeModule = (uid) => setItems((prev) => prev.filter((item) => item.uid !== uid));<\/p>\n
const reset = () => {
\n setLayout(“straight”);
\n setRoomWidth(360);
\n setRoomDepth(260);
\n setItems([
\n { uid: crypto.randomUUID(), …MODULES[1], zone: “wand” },
\n { uid: crypto.randomUUID(), …MODULES[2], zone: “wand” },
\n { uid: crypto.randomUUID(), …MODULES[3], zone: “wand” },
\n ]);
\n };<\/p>\n
const exportDesign = () => {
\n const data = {
\n ruimte: { breedte_cm: roomWidth, diepte_cm: roomDepth },
\n layout,
\n modules: items.map(({ uid, name, width, depth, price, zone }) => ({ uid, name, width, depth, price, zone })),
\n prijsindicatie: { kasten: cabinetsPrice, werkblad: worktopPrice, montage: installPrice, totaal: totalPrice },
\n };
\n const blob = new Blob([JSON.stringify(data, null, 2)], { type: “application\/json” });
\n const url = URL.createObjectURL(blob);
\n const a = document.createElement(“a”);
\n a.href = url;
\n a.download = “keukenontwerp.json”;
\n a.click();
\n URL.revokeObjectURL(url);
\n };<\/p>\n
const scale = 1.35;
\n const roomSvgWidth = Math.max(420, roomWidth * scale);
\n const roomSvgHeight = Math.max(260, roomDepth * scale);<\/p>\n
return (<\/p>\n
Online configurator<\/p>\n
Stel een keuken samen, controleer of de indeling past en exporteer het ontwerp als JSON.<\/p>\n<\/p><\/div>\n