Add functional links between Sidebar nav buttons and Canvas views

2025-07-23 12:03:06 -07:00
parent 0ec105d9ec
commit 43fd246b1f
6 changed files with 109 additions and 7 deletions
@@ -1,22 +1,24 @@
 // This Canvas component will be used to dynamically populate 
 // the main canvas section of the web App with a default state
 // of 'WidgetCanvas' 
-import { useState } from "react";
+
 import { Box } from "@chakra-ui/react";
 import CanvasHeader from "./CanvasHeader";
 import WidgetCanvas from "./views/WidgetCanvas";
-// import MapCanvas from "./views/MapCanvas";
-// import AdminCanvas from "./views/AdminCanvas";
+import GlobalMapCanvas from "./views/GlobalMapCanvas";
+import RegionalMapCanvas from "./views/RegionalMapCanvas";
+import VolcanoCanvas from "./views/VolcanoCanvas";
+import AdminCanvas from "./views/AdminCanvas";

 export default function Canvas({ view }) {
-    // const [view, setView] = useState("widget");
-
    return (
        <Box height="100%" width="100%">
            <CanvasHeader />
            {view === "widget" && <WidgetCanvas />}
-            {/* {view === "map" && <MapCanvas />} */}
-            {/* {view === "admin" && <AdminCanvas />} */}
+            {view === "global" && <GlobalMapCanvas />}
+            {view === "regional" && <RegionalMapCanvas />}
+            {view === "volcano" && <VolcanoCanvas />}
+            {view === "admin" && <AdminCanvas />}
        </Box>
    );
 }
@@ -0,0 +1,24 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function AdminCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Admin Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}
@@ -0,0 +1,24 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function GlobalMapCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Global Map Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}
@@ -0,0 +1,26 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function RegionalMapCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+
+            
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Regional Map Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}
@@ -0,0 +1,26 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function VolcanoCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+
+            
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Volcano Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}