3d788740cb
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>
911 lines
30 KiB
JavaScript
911 lines
30 KiB
JavaScript
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>
|
|
</>
|
|
);
|
|
}
|