Add boilerplate Volcano view page

client/src/components/Canvas/views/Home.jsx

@@ -111,6 +111,7 @@ export default function Home({...props}) {
 				bg="base200"
 				px={6}
 				pt={3}
+        pb={2}
 				align="center"
 				justify="space-between"
         width="100%"

client/src/components/Canvas/views/Volcano.jsx

@@ -1,24 +1,59 @@
-import { Box, Text } from '@chakra-ui/react';
+import { Box, Text, Heading, DataList } from '@chakra-ui/react';
+import React from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 
 export default function Volcano() {
+    const position = [46.2, -122.18]; // Mt. St. Helens
+    const stats = [
+        { label: "Elevation", value: "2,539 (m) 8,330 (ft)", helpText: "Volcano Elevation" },
+        { label: "Volcano Type", value: "Stratovolcano", helpText: "Volcano Type" },
+        { label: "Composition", value: "Basalt to Ryodacite", helpText: "Volcano Composition" },
+        { label: "Recent Eruptions", value: "1980, 2004-2008", helpText: "Last Eruption" },
+        { label: "Threat Potential", value: "Very High", helpText: "Threat Potential" },
+    
+    ]
     return (
-        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+        <Box height="550px" width="100%">
-            <Box 
+            <Heading as="h1" pb={3}>
-                bg="bg" 
+                Mt. St. Helens - United States CVO
-                shadow="md" 
+            </Heading>
-                borderRadius="md"
+            <MapContainer center={position} zoom={10} style={{ height: "100%", width: "100%" }}>
-                p={8}
+                <TileLayer
-                width="600px"
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                height="100px"
+                attribution='&copy; OpenStreetMap contributors'
-                textAlign="center"
+                />
-                display="flex"
+                <Marker position={position}>
-                alignItems="center"
+                    <Popup>
-                justifyContent="center"
+                        CVO — Home of the volcanoligists
-            >
+                    </Popup>
-                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                </Marker>
-                    Volcano Canvas coming soon!
+            </MapContainer>
-                </Text>
+            <DataList.Root orientation="horizontal">
-            </Box>
+                {stats.map((item) => (
+                    <DataList.Item key={item.label}>
+                        <DataList.ItemLabel>{item.label}</DataList.ItemLabel>
+                        <DataList.ItemValue>{item.value}</DataList.ItemValue>
+                    </DataList.Item>
+                ))}
+            </DataList.Root>
         </Box>
+        // <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>
     );
 }