-
+
+
+
+ Brand new car
+
+
+
+ Build Now
+
+
+
+
)
}
diff --git a/src/Images/LandCruiserTrim.png b/src/Images/LandCruiserTrim.png
new file mode 100644
index 0000000..f2b84af
Binary files /dev/null and b/src/Images/LandCruiserTrim.png differ
diff --git a/src/Images/Trim.png b/src/Images/Trim.png
index 9c2bc0a..99a45fd 100644
Binary files a/src/Images/Trim.png and b/src/Images/Trim.png differ
diff --git a/src/Images/carIcon.jsx b/src/Images/carIcon.jsx
index daacd8a..b68ed7e 100644
--- a/src/Images/carIcon.jsx
+++ b/src/Images/carIcon.jsx
@@ -3,7 +3,7 @@ import carIconLogo from './carIconLogo.svg'
function carIcon(){
return(
-
+
)
}
export default carIcon
\ No newline at end of file
diff --git a/src/LandCruiserConfig.jsx b/src/LandCruiserConfig.jsx
new file mode 100644
index 0000000..8834fc9
--- /dev/null
+++ b/src/LandCruiserConfig.jsx
@@ -0,0 +1,226 @@
+import React, { useState, useEffect } from 'react';
+import { Grid, Button, Typography, FormControlLabel, FormControl, AccordionSummary, AccordionDetails, RadioGroup, IconButton } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ThreeSixtyIcon from '@mui/icons-material/ThreeSixty';
+import CameraswitchIcon from '@mui/icons-material/Cameraswitch';
+import './Styles/style.css'
+import { defaultButton, StyledAccordion, StyledRadio } from './Styles/MUIStyle.js'
+import { ThemeProvider } from '@mui/material/styles';
+
+import { Canvas } from "@react-three/fiber";
+import { Suspense } from "react";
+import { OrbitControls } from "@react-three/drei";
+import Model from './components/Mazda.jsx'
+import Toyota from './components/LandCruiser.jsx'
+
+import {getDatabase, set, ref , update, onValue, get,child, push} from "firebase/database";
+import {database} from "./firebase"
+import { useAuth } from "./AuthContext.js"
+
+//Change
to to change to other model
+function Scene(props) {
+ return (
+
+
+
+
+
+
+
+ )
+}
+
+export default function CarConfig()
+{
+
+
+ const {getCurrentUser} = useAuth()
+ const user = getCurrentUser()
+
+ const [carName, setCarName] = useState()
+ const [carPrice,setCarPrice] = useState()
+
+ const [modelColor, setColor] = useState("Red");
+ const [wheelClr, setWheelColor] = useState("#a9a9a9");
+
+ //get database information for car
+ useEffect(() =>
+ {
+ const reference = ref(database,'/Cars/'+ '/LandCruiser/');
+ get(reference).then((snapshot) =>
+ {if(snapshot.exists())
+ {
+ setCarName(snapshot.val().Name)
+ setCarPrice(snapshot.val().Price)
+ console.log(snapshot.val())
+ }
+
+ });
+ })
+
+
+ //save user configuration to database
+ async function handleSubmitConfig(e){
+
+ try{
+ push(ref(database, '/users/' + user.uid + '/SavedCars/'), {
+
+ Name:carName,
+ Price:carPrice,
+ Color:modelColor,
+ WheelClr:wheelClr
+
+ })
+ .then(() => {
+ // Data saved successfully!
+ alert('Car Saved Successfully');
+
+ })
+ .catch((error) => {
+ // The write failed...
+ alert(error);
+ });
+ }
+ catch{
+
+ }
+
+
+
+
+
+ }
+ return(
+
+ {/*Left side of screen*/}
+
+
+
+
+
+
+
+
+
+ {/*3d Model*/}
+
+
+
+
+
+
+
+
+ {carName}
+ MSRP: ${carPrice}
+
+
+
+
+ {/*Right side of screen*/}
+
+
+ Configure Exterior
+
+
+ {/*Color Select*/}
+
+ }
+ aria-controls="panel1a-content"
+ id="panel1a-header"
+ >
+ Color
+
+
+
+ setColor(e.target.value)}
+ id='changing the color of the 3d car model'
+ for='changing the color of the 3d car model'
+ title='changing the color of the 3d car model'
+ >
+
+
+
+
+
+ {/*Wheel Color Select*/}
+
+ }
+ aria-controls="panel2a-content"
+ id="panel2a-header"
+ >
+ Wheels
+
+
+
+ setWheelColor(e.target.value)}
+ id='changing the Wheel color of the 3d car model'
+ for='changing the Wheel color of the 3d car model'
+ title='changing the Wheel color of the 3d car model'
+ >
+
+
+
+
+
+
+ {handleSubmitConfig()}}>
+ Save Configuration
+
+
+ Cart
+
+
+
+
+
+ )
+}
diff --git a/src/Login.js b/src/Login.js
index 4876803..11fdfe9 100644
--- a/src/Login.js
+++ b/src/Login.js
@@ -47,7 +47,7 @@ export default function Login() {
display: 'flex',
flexDirection: 'column',
alignItems:"center"}}>
- Login
+ Login