Add Volcano tabs along with functioning boilerplate component views
This commit is contained in:
Daniel S. Hansen
@@ -1,4 +1,4 @@
|
||||
import { Box, Text, Flex, Tabs, HStack } from '@chakra-ui/react';
|
||||
import { Flex, Tabs, HStack } from '@chakra-ui/react';
|
||||
import { MEDataEntry } from './AdminTabs/MEDataEntry';
|
||||
import { ProjectCollector } from './AdminTabs/ProjectCollector';
|
||||
import { NASApplication } from './AdminTabs/NASApplication';
|
||||
|
||||
@@ -1,70 +1,50 @@
|
||||
import { Box, Text, Heading, DataList, HStack } from '@chakra-ui/react';
|
||||
import React from "react";
|
||||
import { Box, Text, Heading, DataList, HStack, Tabs } from '@chakra-ui/react';
|
||||
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
|
||||
import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
|
||||
import { VOLCANO_VIEWS } 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() {
|
||||
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.
|
||||
`;
|
||||
|
||||
export default function Volcano({ view, onChangeView }) {
|
||||
return (
|
||||
<Box width="100%" px={6} py={4}>
|
||||
<Heading textAlign="center" mb={6} size="xl" fontWeight="bold">
|
||||
Mount St. Helens - United States CVO
|
||||
</Heading>
|
||||
<Tabs.Root
|
||||
key={view}
|
||||
value={view}
|
||||
// onValueChange={(e) => onChangeView(e.value)}
|
||||
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);
|
||||
}}
|
||||
>
|
||||
{/* HEADER */}
|
||||
<CanvasHeaderTabs tabs={VOLCANO_VIEWS} />
|
||||
|
||||
<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>
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Box, Text } from "@chakra-ui/react";
|
||||
|
||||
export function OfficialInstitutions() {
|
||||
return(
|
||||
<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">Official Institutions dashboard coming soon.</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Box, Text } from "@chakra-ui/react";
|
||||
|
||||
export function PartnerData() {
|
||||
return(
|
||||
<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">Partner Data dashboard coming soon.</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Box, Text } from "@chakra-ui/react";
|
||||
|
||||
export function Reports() {
|
||||
return(
|
||||
<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">Reports dashboard coming soon.</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Box, Text } from "@chakra-ui/react";
|
||||
|
||||
export function SocialMedia() {
|
||||
return(
|
||||
<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">Social Media dashboard coming soon.</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user