feat: Latest production version with interior scene and glass
Includes room interior with floor, walls, glass you can see through, and all uncommitted production changes that were running live. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ubuntu
910
bron/samenstling.js
Normal file
910
bron/samenstling.js
Normal file
@@ -0,0 +1,910 @@
|
||||
import { useContext, useState } from "react";
|
||||
import { MyContext } from "../data/contextapi";
|
||||
import InfoIcon from "./InfoIcon";
|
||||
|
||||
export default function Samenstling() {
|
||||
const {
|
||||
type,
|
||||
settype,
|
||||
setStep,
|
||||
width,
|
||||
setWidth,
|
||||
doorConfig,
|
||||
setDoorConfig,
|
||||
sidePannel,
|
||||
setSidePannel,
|
||||
sidePannelConfig,
|
||||
setSidePannelConfig,
|
||||
sidePannelSize,
|
||||
setSidePannelSize,
|
||||
stalenPart,
|
||||
setStalenPart,
|
||||
stalenType,
|
||||
setStalenType,
|
||||
open,
|
||||
inprogress,
|
||||
holeWidth,
|
||||
setHoleWidth,
|
||||
} = useContext(MyContext);
|
||||
|
||||
const doorImages = {
|
||||
Taatsdeur: "door_type_1_staging.jpg",
|
||||
Schuifdeur: "door_type_2_staging.jpg",
|
||||
Scharnier: "door_type_3.jpg",
|
||||
"vast-stalen": "door_type_4.jpg",
|
||||
};
|
||||
|
||||
const handleStalenPart = (e) => {
|
||||
setStalenPart(e.target.value);
|
||||
};
|
||||
|
||||
const handleWidthChange = (e) => {
|
||||
if (doorConfig === "dubbele" || sidePannel != "geen") {
|
||||
setSidePannelSize(calculateSidePanelWidth(holeWidth, e.target.value));
|
||||
setWidth(e.target.value);
|
||||
} else {
|
||||
setWidth(e.target.value);
|
||||
setSidePannelSize(e.target.value);
|
||||
}
|
||||
|
||||
if (sidePannel == "geen") {
|
||||
setHoleWidth(
|
||||
doorConfig === "dubbele" ? 2 * e.target.value : e.target.value
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const calculateSidePanelWidth = (totalWidth, doorWidth) => {
|
||||
if (
|
||||
doorConfig != "dubbele" &&
|
||||
(sidePannel === "links" || sidePannel === "rechts")
|
||||
) {
|
||||
return totalWidth - Number(doorWidth);
|
||||
}
|
||||
|
||||
if (doorConfig == "dubbele" && sidePannel == "geen") {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (doorConfig != "dubbele" && sidePannel === "beide") {
|
||||
return (totalWidth - Number(doorWidth)) / 2;
|
||||
}
|
||||
if (
|
||||
doorConfig == "dubbele" &&
|
||||
(sidePannel == "links" || sidePannel == "rechts")
|
||||
) {
|
||||
return totalWidth - Number(doorWidth) * 2;
|
||||
}
|
||||
|
||||
if (doorConfig == "dubbele" && sidePannel == "beide") {
|
||||
return (totalWidth - Number(doorWidth) * 2) / 2;
|
||||
}
|
||||
|
||||
return 0;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ width: "100%", height: "100%" }}>
|
||||
{type != "vast-stalen" ? (
|
||||
<>
|
||||
<div style={{ width: "100%" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "0 5%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
}}
|
||||
>
|
||||
<span>Samenstelling deur</span>
|
||||
{/* <div
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
borderRadius: "20px",
|
||||
width: "auto",
|
||||
padding: "2px 10px",
|
||||
margin: "0 0 0 10px",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="body-txt"
|
||||
style={{}}
|
||||
onClick={() => {
|
||||
setStep("door");
|
||||
}}
|
||||
>
|
||||
€ 1200,00
|
||||
</span>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(2, 1fr)",
|
||||
gridColumnGap: "10px",
|
||||
fontSize: "11px",
|
||||
margin: "5%",
|
||||
borderBottom: "1px solid #d1d1d1",
|
||||
paddingBottom: "15px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
margin: "5px",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!inprogress) setDoorConfig("enkele");
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border:
|
||||
doorConfig === "enkele" ? "2px solid black" : "none",
|
||||
|
||||
borderRadius: "5px",
|
||||
overflow: "hidden",
|
||||
backgroundColor: "white",
|
||||
padding: "10px",
|
||||
boxShadow:
|
||||
doorConfig === "enkele"
|
||||
? "none"
|
||||
: "rgba(0, 0, 0, 0.6) -5px -2px 10px -2px",
|
||||
aspectRatio: "1/1",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<center>
|
||||
<img
|
||||
src={`./images/doortypes/door_type_3_staging.jpg`}
|
||||
style={{
|
||||
maxHeight: "100%",
|
||||
width: "80%",
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
</center>
|
||||
<div
|
||||
style={{ position: "absolute", top: "2px", right: "2px" }}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="sm"
|
||||
checked={doorConfig === "enkele"}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
paddingTop: "5px",
|
||||
margin: "10px 0 0 0",
|
||||
backgroundColor:
|
||||
doorConfig === "enkele" ? "black" : "#bdc79d",
|
||||
color: "white",
|
||||
border: `1px solid ${
|
||||
doorConfig === "enkele" ? "black" : "white"
|
||||
}`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-5px",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
height: "8px",
|
||||
borderRadius: "50px",
|
||||
backgroundColor: "#fff",
|
||||
borderBottom: `1px solid ${
|
||||
doorConfig === "enkele" ? "black" : "white"
|
||||
}`,
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "inline-block",
|
||||
flex: 1,
|
||||
textAlign: "center",
|
||||
textTransform: "uppercase",
|
||||
padding: "2px 0",
|
||||
}}
|
||||
>
|
||||
Enkele deur
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
margin: "5px",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!inprogress) setDoorConfig("dubbele");
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border:
|
||||
doorConfig === "dubbele" ? "2px solid black" : "none",
|
||||
borderRadius: "10px",
|
||||
boxShadow: "-5px -2px 10px -2px rgba(0,0,0,0.6)",
|
||||
padding: "10px",
|
||||
backgroundColor: "white",
|
||||
aspectRatio: "1/1",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<center>
|
||||
<img
|
||||
src={`./images/doortypes/double-door-type_staging.jpg`}
|
||||
style={{
|
||||
maxWidth: "80%",
|
||||
maxHeight: "100%",
|
||||
}}
|
||||
/>
|
||||
</center>
|
||||
<div
|
||||
style={{ position: "absolute", top: "2px", right: "2px" }}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="sm"
|
||||
checked={doorConfig === "dubbele"}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
margin: "10px 0 0 0",
|
||||
paddingTop: "5px",
|
||||
backgroundColor:
|
||||
doorConfig === "dubbele" ? "black" : "#bdc79d",
|
||||
color: "white",
|
||||
border: `1px solid ${
|
||||
doorConfig === "dubbele" ? "black" : "white"
|
||||
}`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-5px",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
height: "8px",
|
||||
borderRadius: "50px",
|
||||
backgroundColor: "#fff",
|
||||
borderBottom: `1px solid ${
|
||||
doorConfig === "dubbele" ? "black" : "white"
|
||||
}`,
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "inline-block",
|
||||
flex: 1,
|
||||
textTransform: "uppercase",
|
||||
textAlign: "center",
|
||||
padding: "2px 0",
|
||||
}}
|
||||
>
|
||||
Dubbele deur
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "100%" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "5%",
|
||||
paddingTop: "0.5rem",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
}}
|
||||
>
|
||||
<InfoIcon title={"Samenstelling zijpaneel"} />
|
||||
{/* <div
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
borderRadius: "20px",
|
||||
width: "auto",
|
||||
padding: "2px 10px",
|
||||
margin: "0 0 0 10px",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="body-txt"
|
||||
style={{}}
|
||||
onClick={() => {
|
||||
setStep("door");
|
||||
}}
|
||||
>
|
||||
€ 900,00
|
||||
</span>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="door-content-2"
|
||||
style={{
|
||||
borderBottom: "25px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="door-content-2-1"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(2, 1fr)",
|
||||
gridColumnGap: "10px",
|
||||
fontSize: "11px",
|
||||
padding: "5%",
|
||||
borderBottom: "2px solid #d1d1d1",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
margin: "5px",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!inprogress) setSidePannel("links");
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border:
|
||||
sidePannel === "links"
|
||||
? "2px solid black"
|
||||
: "2px solid #d7d7d7",
|
||||
|
||||
borderRadius: "5px",
|
||||
overflow: "hidden",
|
||||
boxShadow:
|
||||
sidePannel === "links"
|
||||
? "none"
|
||||
: "rgba(0, 0, 0, 0.6) -5px -2px 10px -2px",
|
||||
aspectRatio: "1/1",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ position: "absolute", top: "2px", right: "2px" }}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="sm"
|
||||
checked={sidePannel === "links"}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<center>
|
||||
<img
|
||||
src="./images/doortypes/samenstelling_link.png"
|
||||
style={{
|
||||
maxWidth: "80%",
|
||||
maxHeight: "100%",
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
</center>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
margin: "10px 0 0 0",
|
||||
backgroundColor:
|
||||
sidePannel === "links" ? "black" : "#bdc79d",
|
||||
color: "white",
|
||||
paddingTop: "5px",
|
||||
// border: '2px solid white',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-5px",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
height: "8px",
|
||||
borderRadius: "50px",
|
||||
backgroundColor: "#fff",
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
className="itm-txt"
|
||||
style={{
|
||||
display: "block",
|
||||
wordWrap: "break-word",
|
||||
textAlign: "center",
|
||||
fontWeight: "normal",
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
links
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
margin: "5px",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!inprogress) setSidePannel("rechts");
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border:
|
||||
sidePannel === "rechts"
|
||||
? "2px solid black"
|
||||
: "2px solid #d7d7d7",
|
||||
borderRadius: "5px",
|
||||
overflow: "hidden",
|
||||
boxShadow:
|
||||
sidePannel === "rechts"
|
||||
? "none"
|
||||
: "rgba(0, 0, 0, 0.6) -5px -2px 10px -2px",
|
||||
aspectRatio: "1/1",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ position: "absolute", top: "2px", right: "2px" }}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="sm"
|
||||
checked={sidePannel === "rechts"}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<center>
|
||||
<img
|
||||
src="./images/doortypes/samenstelling_rechts.png"
|
||||
style={{ maxWidth: "80%", maxHeight: "100%" }}
|
||||
/>
|
||||
</center>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
paddingTop: "5px",
|
||||
margin: "10px 0 0 0",
|
||||
backgroundColor:
|
||||
sidePannel === "rechts" ? "black" : "#bdc79d",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-5px",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
height: "8px",
|
||||
borderRadius: "50px",
|
||||
backgroundColor: "#fff",
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
className="itm-txt"
|
||||
style={{
|
||||
display: "block",
|
||||
wordWrap: "break-word",
|
||||
textAlign: "center",
|
||||
fontWeight: "normal",
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
rechts
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
margin: "5px",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!inprogress) setSidePannel("beide");
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border:
|
||||
sidePannel === "beide"
|
||||
? "2px solid black"
|
||||
: "2px solid #d7d7d7",
|
||||
borderRadius: "5px",
|
||||
overflow: "hidden",
|
||||
boxShadow:
|
||||
sidePannel === "beide"
|
||||
? "none"
|
||||
: "rgba(0, 0, 0, 0.6) -5px -2px 10px -2px",
|
||||
aspectRatio: "1/1",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ position: "absolute", top: "2px", right: "2px" }}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="sm"
|
||||
checked={sidePannel === "beide"}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<center>
|
||||
<img
|
||||
src="./images/doortypes/samenstelling_beide.png"
|
||||
style={{ maxWidth: "80%", maxHeight: "100%" }}
|
||||
/>
|
||||
</center>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
paddingTop: "5px",
|
||||
margin: "10px 0 0 0",
|
||||
backgroundColor:
|
||||
sidePannel === "beide" ? "black" : "#bdc79d",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-5px",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
height: "8px",
|
||||
borderRadius: "50px",
|
||||
backgroundColor: "#fff",
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
className="itm-txt"
|
||||
style={{
|
||||
display: "block",
|
||||
wordWrap: "break-word",
|
||||
textAlign: "center",
|
||||
fontWeight: "normal",
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
beide
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
margin: "5px",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!inprogress) {
|
||||
setSidePannel("geen");
|
||||
setSidePannelSize(width);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border:
|
||||
sidePannel === "geen"
|
||||
? "2px solid black"
|
||||
: "2px solid #d7d7d7",
|
||||
borderRadius: "5px",
|
||||
overflow: "hidden",
|
||||
boxShadow:
|
||||
sidePannel === "geen"
|
||||
? "none"
|
||||
: "rgba(0, 0, 0, 0.6) -5px -2px 10px -2px",
|
||||
aspectRatio: "1/1",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ position: "absolute", top: "2px", right: "2px" }}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="sm"
|
||||
checked={sidePannel === "geen"}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<center>
|
||||
<img
|
||||
src="./images/doortypes/samenstelling_geen.png"
|
||||
style={{ maxWidth: "80%", maxHeight: "100%" }}
|
||||
/>
|
||||
</center>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
paddingTop: "5px",
|
||||
margin: "10px 0 0 0",
|
||||
backgroundColor:
|
||||
sidePannel === "geen" ? "black" : "#bdc79d",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-5px",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
height: "8px",
|
||||
borderRadius: "50px",
|
||||
backgroundColor: "#fff",
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
className="itm-txt"
|
||||
style={{
|
||||
display: "block",
|
||||
wordWrap: "break-word",
|
||||
textAlign: "center",
|
||||
fontWeight: "normal",
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
geen
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ width: "100%" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "5%",
|
||||
paddingTop: "0.5rem",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
}}
|
||||
>
|
||||
<span>Situatie van het vaste paneel</span>
|
||||
{/* <div
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
borderRadius: "20px",
|
||||
width: "auto",
|
||||
padding: "10px",
|
||||
margin: "0 0 0 10px",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="body-txt"
|
||||
style={{}}
|
||||
onClick={() => {
|
||||
setStep("door");
|
||||
}}
|
||||
>
|
||||
€ 0,00
|
||||
</span>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "small",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
margin: "5%",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<input
|
||||
type="radio"
|
||||
className="sm"
|
||||
checked={stalenType == "divider"}
|
||||
readOnly
|
||||
onChange={() => {
|
||||
setStalenType("divider");
|
||||
}}
|
||||
/>
|
||||
<span style={{ marginLeft: "0.5rem" }}>Roomdivider</span>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<input
|
||||
type="radio"
|
||||
className="sm"
|
||||
checked={stalenType == "tussen"}
|
||||
readOnly
|
||||
onChange={() => {
|
||||
setStalenType("tussen");
|
||||
}}
|
||||
/>
|
||||
<span style={{ marginLeft: "0.5rem" }}>Tussen 2 wanden</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "100%" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "5%",
|
||||
paddingTop: "0.5rem",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
}}
|
||||
>
|
||||
<span>Aantal panelen</span>
|
||||
{/* <div
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
borderRadius: "20px",
|
||||
width: "auto",
|
||||
padding: "10px",
|
||||
margin: "0 0 0 10px",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="body-txt"
|
||||
style={{}}
|
||||
onClick={() => {
|
||||
setStep("door");
|
||||
}}
|
||||
>
|
||||
€ 0,00
|
||||
</span>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="slider-container"
|
||||
style={{ display: "flex", alignItems: "center", padding: "5%" }}
|
||||
>
|
||||
<div style={{ flex: 1 }}>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="4"
|
||||
value={stalenPart}
|
||||
onChange={handleStalenPart}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "8px",
|
||||
borderRadius: "5px",
|
||||
appearance: "none",
|
||||
background: "#F2F2F3",
|
||||
outline: "none",
|
||||
marginTop: "10px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginLeft: "10px",
|
||||
paddingLeft: "10px",
|
||||
paddingRight: "10px",
|
||||
paddingTop: "5px",
|
||||
paddingBottom: "5px",
|
||||
backgroundColor: "#F2F2F3",
|
||||
position: "relative",
|
||||
width: "6rem",
|
||||
fontSize: "small",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
>
|
||||
<span style={{ marginRight: "10px" }}>{stalenPart}</span>
|
||||
<span>panelen</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{type !== "vast-stalen" && (
|
||||
<>
|
||||
<div style={{ width: "100%" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "5%",
|
||||
paddingTop: "0.5rem",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
}}
|
||||
>
|
||||
<InfoIcon title={"Breedte deur"} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<input
|
||||
type="range"
|
||||
min={60}
|
||||
max={120}
|
||||
value={width}
|
||||
onChange={handleWidthChange}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "8px",
|
||||
borderRadius: "5px",
|
||||
appearance: "none",
|
||||
background: "#F2F2F3", // Grey line
|
||||
outline: "none", // Remove default outline
|
||||
marginTop: "10px", // Adjust margin to separate from the text above
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginLeft: "10px",
|
||||
paddingLeft: "10px",
|
||||
paddingRight: "10px",
|
||||
paddingTop: "5px",
|
||||
paddingBottom: "5px",
|
||||
backgroundColor: "#F2F2F3",
|
||||
position: "relative",
|
||||
width: "5rem",
|
||||
fontSize: "small",
|
||||
border: "1px solid",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
>
|
||||
<span style={{ marginRight: "10px" }}>{width}</span>
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: "10px",
|
||||
top: "50%",
|
||||
transform: "translateY(-50%)",
|
||||
}}
|
||||
>
|
||||
cm
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
className="volgende btn"
|
||||
onClick={() => {
|
||||
setStep("design");
|
||||
}}
|
||||
>
|
||||
Volgende
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user