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
477
bron/TechInformation.js
Normal file
477
bron/TechInformation.js
Normal file
@@ -0,0 +1,477 @@
|
||||
import React from "react";
|
||||
|
||||
export default function TechInformation({techInformation}) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ width: "100%" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "2% 5% 2% 5%",
|
||||
paddingTop: "0.5rem",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
}}
|
||||
>
|
||||
<span>Technische informatie</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "100%" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "2% 5% 2% 5%",
|
||||
paddingTop: "0.5rem",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
borderBottom: "1px solid GrayText",
|
||||
}}
|
||||
>
|
||||
{/* <div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "small",
|
||||
color: "GrayText",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Type deur
|
||||
</span>
|
||||
</div> */}
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "GrayText",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Deur type
|
||||
</span>
|
||||
</div>
|
||||
<span>{techInformation.type}</span>
|
||||
{/* <span>€ 0,00</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "100%", marginTop: "15px" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "2% 5% 2% 5%",
|
||||
paddingTop: "0.5rem",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
borderBottom: "1px solid GrayText",
|
||||
}}
|
||||
>
|
||||
{/* <div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "small",
|
||||
color: "GrayText",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Aantal deuren in offerte
|
||||
</span>
|
||||
</div> */}
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "GrayText",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Samenstelling deur
|
||||
</span>
|
||||
<span>{techInformation.doorConfig}</span>
|
||||
{/* <span>€ 0,00</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "100%", marginTop: "15px" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "2% 5% 2% 5%",
|
||||
paddingTop: "0.5rem",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
borderBottom: "1px solid GrayText",
|
||||
}}
|
||||
>
|
||||
{/* <div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "small",
|
||||
color: "GrayText",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Aantal en plaats zijpanelen
|
||||
</span>
|
||||
</div> */}
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "GrayText",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Samenstelling zijpaneel
|
||||
</span>
|
||||
<span>{techInformation.sidePannel}</span>
|
||||
{/* <span>€ 0,00</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "100%", marginTop: "15px" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "2% 5% 2% 5%",
|
||||
paddingTop: "0.5rem",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
borderBottom: "1px solid GrayText",
|
||||
}}
|
||||
>
|
||||
{/* <div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "small",
|
||||
color: "GrayText",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Verdeling elementen
|
||||
</span>
|
||||
</div> */}
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "GrayText",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Paneel verdeling
|
||||
</span>
|
||||
<span>{techInformation.sidePannelConfig}</span>
|
||||
{/* <span>€ 0,00</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{techInformation.sidePannelConfig === "eigen maat" && (
|
||||
<div style={{ width: "100%", marginTop: "15px" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "2% 5% 2% 5%",
|
||||
paddingTop: "0.5rem",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
borderBottom: "1px solid GrayText",
|
||||
}}
|
||||
>
|
||||
{/* <div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "small",
|
||||
color: "GrayText",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Breedte deur
|
||||
</span>
|
||||
</div> */}
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "GrayText",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Breedte deur
|
||||
</span>
|
||||
<span>{techInformation.sidePannelSize}</span>
|
||||
{/* <span>€ 0,00</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ width: "100%", marginTop: "15px" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "2% 5% 2% 5%",
|
||||
paddingTop: "0.5rem",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
borderBottom: "1px solid GrayText",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "GrayText",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Breedte deur
|
||||
</span>
|
||||
<span>
|
||||
{techInformation.width}
|
||||
</span>
|
||||
{/* <span>€ 0,00</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "100%", marginTop: "15px" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "2% 5% 2% 5%",
|
||||
paddingTop: "0.5rem",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
borderBottom: "1px solid GrayText",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "GrayText",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Hoogte sparing
|
||||
</span>
|
||||
<span>{techInformation.height}</span>
|
||||
{/* <span>€ 0,00</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "100%", marginTop: "15px" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "2% 5% 2% 5%",
|
||||
paddingTop: "0.5rem",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
borderBottom: "1px solid GrayText",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "GrayText",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Breedte sparing
|
||||
</span>
|
||||
<span>
|
||||
{techInformation.holeWidth}
|
||||
</span>
|
||||
{/* <span>€ 0,00</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "100%", marginTop: "15px" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "2% 5% 2% 5%",
|
||||
paddingTop: "0.5rem",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
borderBottom: "1px solid GrayText",
|
||||
}}
|
||||
>
|
||||
{/* <div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "small",
|
||||
color: "GrayText",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Vlakverdeling
|
||||
</span>
|
||||
</div> */}
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "GrayText",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Design
|
||||
</span>
|
||||
<span>{techInformation.door}</span>
|
||||
{/* <span>€ 0,00</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "100%", marginTop: "15px" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "2% 5% 2% 5%",
|
||||
paddingTop: "0.5rem",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
borderBottom: "1px solid GrayText",
|
||||
}}
|
||||
>
|
||||
{/* <div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "small",
|
||||
color: "GrayText",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Handgreep
|
||||
</span>
|
||||
</div> */}
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "GrayText",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Handgreep
|
||||
</span>
|
||||
<span>{techInformation.handle}</span>
|
||||
{/* <span>€ 0,00</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "100%", marginTop: "15px" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "2% 5% 2% 5%",
|
||||
paddingTop: "0.5rem",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
borderBottom: "1px solid GrayText",
|
||||
}}
|
||||
>
|
||||
{/* <div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "small",
|
||||
color: "GrayText",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Kleur glas
|
||||
</span>
|
||||
</div> */}
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "GrayText",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Glas soort
|
||||
</span>
|
||||
<span>{techInformation.colorGlass}</span>
|
||||
{/* <span>€ 0,00</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "100%", marginTop: "15px" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "2% 5% 2% 5%",
|
||||
paddingTop: "0.5rem",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
borderBottom: "1px solid GrayText",
|
||||
}}
|
||||
>
|
||||
{/* <div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "small",
|
||||
color: "GrayText",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
RAL Kleur
|
||||
</span>
|
||||
</div> */}
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "GrayText",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Kleur
|
||||
</span>
|
||||
<span>{techInformation.steelColor}</span>
|
||||
{/* <span>€ 0,00</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "100%", marginTop: "15px" }}>
|
||||
<div
|
||||
style={{
|
||||
margin: "2% 5% 2% 5%",
|
||||
paddingTop: "0.5rem",
|
||||
fontWeight: "bolder",
|
||||
fontSize: "normal",
|
||||
borderBottom: "1px solid GrayText",
|
||||
}}
|
||||
>
|
||||
{/* <div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "small",
|
||||
color: "GrayText",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Verzending en montage
|
||||
</span>
|
||||
</div> */}
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "GrayText",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Extra opties
|
||||
</span>
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", width: "80%" }}
|
||||
>
|
||||
{techInformation.extraOptions.map((extraOption, index) => {
|
||||
return (
|
||||
<span style={{ fontSize: "14px" }} key={`extra-${index}`}>
|
||||
- {extraOption}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* <span>€ 0,00</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user