Files
Web-Frontend/client/src/App.jsx
T
2026-06-04 15:30:01 -07:00

60 lines
1.9 KiB
React

import 'leaflet/dist/leaflet.css';
import { Routes, Route } from 'react-router-dom';
import { useRecipe, Grid, GridItem, useDialog } from "@chakra-ui/react";
import { createContext } from "react";
import Login from "@/Login.jsx";
import Sidebar from "./components/Sidebar/Sidebar.jsx";
import DialogPopup from "@/components/Canvas/CanvasComponents/DialogPopup.jsx";
import Header from "@/components/Header/Header.jsx";
import Home from "./components/Canvas/views/Home.jsx";
import RegionalMap from "./components/Canvas/views/RegionalMap.jsx";
import Volcano from "@/components/Canvas/views/Volcano.jsx";
function AppFoundation({children}) {
const recipe = useRecipe({ key: "dashboard" });
const styles = recipe();
const dialog = useDialog();
return (
<>
<DialogPopup dialog={dialog} />
<Grid css={styles}
templateRows="1fr 11fr"
templateColumns="auto 1fr"
height="100vh"
width="100vw"
>
<GridItem rowSpan={1} colSpan={2}>
<Header />
</GridItem>
<GridItem colSpan={1}>
<Sidebar />
</GridItem>
<GridItem colSpan={1} width="100%" overflow="auto">
{children}
</GridItem>
</Grid>
</>
)
}
// function ProtectedRoute({ user, children }) {
// if (user) return children;
// else return <Navigate to="/login" replace />;
// }
function App() {
const sidebarContext = createContext(["Home", "Global Map", "Regional Map", "Volcano", "Admin"]);
// const [user, setUser] = useState(null);
return (
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/home" element={<AppFoundation> <Home/> </AppFoundation>} />
<Route path="/regional-map" element={<AppFoundation> <RegionalMap/> </AppFoundation>} />
<Route path="/volcano" element={<AppFoundation> <Volcano/> </AppFoundation>} />
</Routes>
);
}
export default App