68 lines
2.4 KiB
React
68 lines
2.4 KiB
React
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>
|
|
);
|
|
}
|