Merge branch 'feature/add-volcano-view' into 'main'

Feature/add volcano view

See merge request vkuchenik/website-framework!56

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

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

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

@@ -1,24 +1,70 @@
-import { Box, Text } 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";
 
 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" },
+    
+    ]
+
+    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 p={8} mt={4} ml="auto" mr="auto" width="600px">
+        <Box width="100%" px={6} py={4}>
-            <Box 
+            <Heading textAlign="center" mb={6} size="xl" fontWeight="bold">
-                bg="bg" 
+                Mount St. Helens - United States CVO
-                shadow="md" 
+            </Heading>
-                borderRadius="md"
+            
-                p={8}
+            <Box height="550px" borderRadius="md" overflow="hidden" boxShadow="md" mb={6}>
-                width="600px"
+                <MapContainer center={position} zoom={10} style={{ height: "100%", width: "100%" }}>
-                height="100px"
+                    <TileLayer
-                textAlign="center"
+                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                display="flex"
+                        attribution='&copy; OpenStreetMap contributors'
-                alignItems="center"
+                    />
-                justifyContent="center"
+                    <Marker position={position}>
-            >
+                        <Popup>
-                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                            CVO — Home of the volcanoligists
-                    Volcano Canvas coming soon!
+                        </Popup>
-                </Text>
+                    </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.Item>
+                        ))}
+                    </DataList.Root>
+                </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>
     );
 }