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={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"
|
|||
|
|
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>
|
|||
|
|
);
|
|||
|
|
}
|