Merge branch 'main' into 'add/widgets/theme'

# Conflicts: # client/src/App.jsx
2025-07-23 21:25:21 +00:00
parent 1f1eced159 64540f2de1
commit 20ca59ad82
9 changed files with 178 additions and 78 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";
-
-export default function Canvas() {
-    const [view, setView] = useState("widget");
+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 }) {
    return (
        <Box height="100%" width="100%">
-            <CanvasHeader onSwitchView={setView} />
+            <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>
+    );
+}