Add Volcano view DataList, historical summary, and map

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

@@ -1,4 +1,4 @@
-import { Box, Text, Heading, DataList } from '@chakra-ui/react';
+import { Box, Text, Heading, DataList, HStack } from '@chakra-ui/react';
 import React from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 
@@ -12,11 +12,23 @@ export default function Volcano() {
         { label: "Threat Potential", value: "Very High", helpText: "Threat Potential" },
     
     ]
+
+    const historyText = `
+    Mount St. Helens, located in the Cascade Range of Washington State, is one of the most
+    active and well-known volcanoes in the United States. It famously erupted on May 18, 1980,
+    in one of the most significant volcanic events in U.S. history, which caused widespread
+    devastation and loss of life. The eruption reduced the mountain’s summit and created a large
+    crater. Subsequent dome-building eruptions continued through the 2000s, and the volcano
+    remains closely monitored today.
+  `;
+
     return (
-        <Box height="550px" width="100%">
-            <Heading as="h1" pb={3}>
-                Mt. St. Helens - United States CVO
+        <Box width="100%" px={6} py={4}>
+            <Heading textAlign="center" mb={6} size="xl" fontWeight="bold">
+                Mount St. Helens - United States CVO
             </Heading>
+            
+            <Box height="550px" borderRadius="md" overflow="hidden" boxShadow="md" mb={6}>
                 <MapContainer center={position} zoom={10} style={{ height: "100%", width: "100%" }}>
                     <TileLayer
                         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
@@ -28,32 +40,31 @@ export default function Volcano() {
                         </Popup>
                     </Marker>
                 </MapContainer>
+            </Box>
+            
+            <HStack align="start" spacing={10} mt={4}>
+                <Box width="300px" height="200px" overflowY="auto" p={4} border="1px solid" borderColor="gray.200" borderRadius="md" bg="gray.50" boxShadow="sm">
                     <DataList.Root orientation="horizontal">
                         {stats.map((item) => (
                             <DataList.Item key={item.label}>
-                        <DataList.ItemLabel>{item.label}</DataList.ItemLabel>
-                        <DataList.ItemValue>{item.value}</DataList.ItemValue>
+                                <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>
+
+                <Box flex="1" height="200px" overflowY="auto" p={4} border="1px solid" borderColor="gray.200" borderRadius="md" bg="gray.50" boxShadow="sm">
+                    <Heading textAlign="center" pb={2}>Historical Summary</Heading>
+                    <Text>
+                        { historyText}
+                    </Text>
+                </Box>
+            </HStack>
+        </Box>
     );
 }