import React, { useState } from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Slider } from '@/components/ui/slider'; import { Select } from '@/components/ui/select'; import { Canvas } from '@react-three/fiber'; import { OrbitControls, Box } from '@react-three/drei'; import { useLoader } from '@react-three/fiber'; import { DXFLoader } from 'three/examples/jsm/loaders/DXFLoader'; export default function Configurator() { const [step, setStep] = useState(1); const [equipment, setEquipment] = useState(''); const [width, setWidth] = useState(150); const [height, setHeight] = useState(50); const [depth, setDepth] = useState(40); const [material, setMaterial] = useState('hout'); const [color, setColor] = useState('wit'); const [suggestion, setSuggestion] = useState(''); const [price, setPrice] = useState(0); const [dxfFile, setDxfFile] = useState(null); const handleNextStep = () => setStep(step + 1); const handlePrevStep = () => setStep(step - 1); const handleGenerateSuggestion = () => { let calculatedPrice = width * height * depth * 0.01; if (material === 'metaal') calculatedPrice += 200; if (equipment.toLowerCase().includes('sonos arc')) { setSuggestion('Voor een Sonos Arc raden we een meubelbreedte van minstens 200 cm aan.'); setWidth(200); calculatedPrice += 150; } else { setSuggestion('Standaardaanbeveling: Houd minstens 10 cm ruimte aan rond je apparatuur.'); } setPrice(calculatedPrice.toFixed(2)); }; const handleDXFUpload = (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (event) => { setDxfFile(event.target.result); }; reader.readAsText(file); } }; const DxfModel = ({ dxfData }) => { const dxf = useLoader(DXFLoader, dxfData); return ; }; return (

AI Meubel Configurator

{step === 1 && ( <> setEquipment(e.target.value)} /> Volgende )} {step === 2 && ( <>

Afmetingen (cm)

Breedte: {width} cm setWidth(val)} /> Hoogte: {height} cm setHeight(val)} /> Diepte: {depth} cm setDepth(val)} />

Volgende Terug )} {step === 3 && ( <>

Materiaal en kleur

Hout Metaal Wit Zwart Grijs { handleGenerateSuggestion(); handleNextStep(); }}>Genereer Suggestie Terug )} {step === 4 && ( <>

3D Visualisatie

{dxfFile && }

{suggestion &&

{suggestion}

}

Prijsindicatie

€ {price}

Bestel Nu Terug )}

); }