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

import { Box, Text, Heading, DataList, Flex, HStack, Tabs } from '@chakra-ui/react';
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
import { VOLCANO_TABS } from '@/constants/viewKeys';
import { VolcanoHome } from './VolcanoTabs/VolcanoHome';
import { PartnerData } from './VolcanoTabs/PartnerData';
import { Reports } from './VolcanoTabs/Reports';
import { OfficialInstitutions } from './VolcanoTabs/OfficialInstitutions';
import { SocialMedia } from './VolcanoTabs/SocialMedia';
import { SearchBar } from "../CanvasComponents/SearchBar";
import { SettingsButton } from "../CanvasComponents/SettingsButton";

export default function Volcano({ view, onChangeView }) {
    return (
        <Tabs.Root
            key={view}
            value={view}
            variant="line"
            width="100%"
            height="100%"
            lazyMount
            // Prevent navigation away from 'My Dashboard' while in Edit mode
            onValueChange={(e) => {
                const nextView = e.value;
                onChangeView(nextView); 
            }}
        >       
            <Flex 
                as="header"
                position="sticky"
                top="0"
                zIndex="dropdown" // zIndex: 1100
                bg="base200"
                pl={5}
                pr={2}
                pt={3}
                align="center"
                justify="space-between"
                width="100%"
            > 
                {/* HEADER */}
                <CanvasHeaderTabs tabs={VOLCANO_TABS} />
                <HStack width="258px" justifyContent="flex-end">
                    <SearchBar />
                    <SettingsButton />
                </HStack>
            </Flex>
            
            {/* CANVAS */}
            <Tabs.Content value="volcanohome">
                <VolcanoHome />
            </Tabs.Content>
            <Tabs.Content value="partner">
                <PartnerData />
            </Tabs.Content>
            <Tabs.Content value="reports">
                <Reports />
            </Tabs.Content>
            <Tabs.Content value="official">
                <OfficialInstitutions />
            </Tabs.Content>
            <Tabs.Content value="social">
                <SocialMedia />
            </Tabs.Content>
        </Tabs.Root>
    );
}