70 lines
3.3 KiB
React
70 lines
3.3 KiB
React
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='© 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>
|
||
);
|
||
} |