Web-Frontend/client/src/components/Canvas/views/Volcano.jsx

import { Box, Text, Heading, DataList } 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" },
    
    ]
    return (
        <Box height="550px" width="100%">
            <Heading as="h1" pb={3}>
                Mt. St. Helens - United States CVO
            </Heading>
            <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>
            <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 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>
    );
}