Added sensorboxes and pictures

control-station/src/App.tsx

@@ -3,7 +3,7 @@ import usePodData from "./services/usePodData";
 import PodContext from "./services/PodContext";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { Dashboard } from "@/views";
-import Dynamics from "./components/Dynamics/Dynamics";
+import Dynamics from "./views/Dynamics/Dynamics";
 
 function App() {
 	const { podData, podSocketClient } = usePodData();

control-station/src/views/Dynamics/Dynamics.css

@@ -0,0 +1,29 @@
+.dynamics {
+	display: flex;
+}
+
+.dynamics-sensorbox {
+	width: 40%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-evenly;
+	align-items: center;
+}
+
+.dynamics-pictures {
+	width: 60%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+	align-items: center;
+}
+
+.pod-picture-container {
+	background-color: rgb(209, 209, 209);
+	width: 60%;
+	height: 40%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 40px;
+}

control-station/src/views/Dynamics/Dynamics.tsx

@@ -0,0 +1,28 @@
+import SensorBox from "@/components/SensorBoxes/Sensors/SensorBox";
+import PodContext from "@/services/PodContext";
+import FrontPod from "@/data/images/FrontPod.png";
+import SidePod from "@/data/images/SidePod.png";
+import "./Dynamics.css";
+import { useContext } from "react";
+function Dynamics() {
+	const { podData } = useContext(PodContext);
+	const { gyroscope } = podData;
+	return (
+		<div className="dynamics">
+			<div className="dynamics-sensorbox">
+				<SensorBox title="Roll" value={gyroscope.roll} />
+				<SensorBox title="Pitch" value={gyroscope.pitch} />
+			</div>
+			<div className="dynamics-pictures">
+				<div className="pod-picture-container">
+					<img src={FrontPod} />
+				</div>
+				<div className="pod-picture-container">
+					<img src={SidePod} />
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default Dynamics;