Refactor made changes to file structures

2026-06-10 14:00:37 -07:00
parent 305ee4e757
commit baaf162df9
46 changed files with 42 additions and 177 deletions
@@ -0,0 +1,70 @@
+import { Box, Text, Heading, DataList, HStack } from '@chakra-ui/react';
+import React from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+
+export function VolcanoHome() {
+    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 width="100%" px={6} py={2}>
+            <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"
+                        attribution='&copy; OpenStreetMap contributors'
+                    />
+                    <Marker position={position}>
+                        <Popup>
+                            CVO — Home of the volcanoligists
+                        </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.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>
+    );
+}