initial commit

src/pages/Dashboard.tsx

@@ -0,0 +1,16 @@
+import FrontCameraOverviewCard from "../components/FrontCameraOverview/FrontCameraOverviewCard";
+import Sightings from "../components/PlateStack/Sightings";
+import RearCameraOverviewCard from "../components/RearCameraOverview/RearCameraOverviewCard";
+
+const Dashboard = () => {
+  return (
+    <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
+      <FrontCameraOverviewCard />
+      <RearCameraOverviewCard />
+      <Sightings title="Front Camera Sightings" />
+      <Sightings title="Rear Camera Sightings" />
+    </div>
+  );
+};
+
+export default Dashboard;

src/pages/FrontCamera.tsx

@@ -0,0 +1,24 @@
+import CameraSettings from "../components/CameraSettings/CameraSettings";
+import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
+import { useNavigate } from "react-router";
+import { useSwipeable } from "react-swipeable";
+
+const FrontCamera = () => {
+  const navigate = useNavigate();
+  const handlers = useSwipeable({
+    onSwipedLeft: () => navigate("/"),
+    trackMouse: true,
+  });
+
+  return (
+    <div
+      className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-4 px-2 sm:px-4 lg:px-0 w-full"
+      {...handlers}
+    >
+      <OverviewVideoContainer title={"Front Camera"} side="Front" />
+      <CameraSettings title="Front Camera Settings" />
+    </div>
+  );
+};
+
+export default FrontCamera;

src/pages/RearCamera.tsx

@@ -0,0 +1,24 @@
+import { useNavigate } from "react-router";
+import { useSwipeable } from "react-swipeable";
+import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
+import CameraSettings from "../components/CameraSettings/CameraSettings";
+
+const RearCamera = () => {
+  const navigate = useNavigate();
+  const handlers = useSwipeable({
+    onSwipedRight: () => navigate("/"),
+    trackMouse: true,
+  });
+
+  return (
+    <div
+      className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-4 px-2 sm:px-4 lg:px-0 w-full order-first"
+      {...handlers}
+    >
+      <CameraSettings title="Rear Camera Settings" />
+      <OverviewVideoContainer title={"Rear Camera"} side={"Rear"} />
+    </div>
+  );
+};
+
+export default RearCamera;