added tabs and file restructure
This commit is contained in:
@@ -1,20 +1,18 @@
|
||||
// This Canvas component will be used to dynamically populate
|
||||
// the main canvas section of the web App with a default state
|
||||
// of 'WidgetCanvas'
|
||||
// of 'DashboardCanvas'
|
||||
|
||||
import { Box } from "@chakra-ui/react";
|
||||
import CanvasHeader from "./CanvasHeader";
|
||||
import WidgetCanvas from "./views/WidgetCanvas";
|
||||
import GlobalMapCanvas from "./views/GlobalMapCanvas";
|
||||
import RegionalMapCanvas from "./views/RegionalMapCanvas";
|
||||
import VolcanoCanvas from "./views/VolcanoCanvas";
|
||||
import AdminCanvas from "./views/AdminCanvas";
|
||||
import { DashboardCanvas } from "./views/DashboardCanvas";
|
||||
|
||||
export default function Canvas({ view }) {
|
||||
return (
|
||||
<Box height="100%" width="100%">
|
||||
<CanvasHeader />
|
||||
{view === "widget" && <WidgetCanvas />}
|
||||
{view === "widget" && <DashboardCanvas />}
|
||||
{view === "global" && <GlobalMapCanvas />}
|
||||
{view === "regional" && <RegionalMapCanvas />}
|
||||
{view === "volcano" && <VolcanoCanvas />}
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
import { Flex, HStack, chakra, useRecipe } from "@chakra-ui/react";
|
||||
import { CanvasHeaderNav } from "./CanvasHeaderNav";
|
||||
import { SearchBar } from "./SearchBar";
|
||||
import { SettingsButton } from "./SettingsButton";
|
||||
|
||||
|
||||
|
||||
export default function CanvasHeader() {
|
||||
const recipe = useRecipe({ key: "canvas" });
|
||||
const styles = recipe();
|
||||
return (
|
||||
<chakra.div css={styles}>
|
||||
<Flex
|
||||
as="header"
|
||||
position="sticky"
|
||||
top="0"
|
||||
bg="base200"
|
||||
borderBottom="1px solid"
|
||||
borderColor="gray.200"
|
||||
px={6}
|
||||
py={3}
|
||||
align="center"
|
||||
justify="space-between"
|
||||
>
|
||||
<CanvasHeaderNav />
|
||||
<HStack spacing={3}>
|
||||
<SearchBar />
|
||||
<SettingsButton />
|
||||
</HStack>
|
||||
</Flex>
|
||||
</chakra.div>
|
||||
);
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import { HStack, Link } from "@chakra-ui/react"
|
||||
|
||||
const navItems = [
|
||||
{ label: "My Dashboard", href: "#dashboard" },
|
||||
{ label: "Gas", href: "#gas" },
|
||||
{ label: "Seismic", href: "#seismic" },
|
||||
{ label: "Remote Sensing", href: "#remote" },
|
||||
{ label: "Daily Activity", href: "#daily" },
|
||||
];
|
||||
|
||||
export function CanvasHeaderNav() {
|
||||
return (
|
||||
<HStack as="nav" gap="8">
|
||||
{navItems.map(({ label, href }) => (
|
||||
<Link key={href} href={href} fontWeight="medium">
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
import { HStack, Flex, Tabs } from "@chakra-ui/react";
|
||||
import WidgetCanvas from "./DashboardCanvasNav/WidgetCanvas";
|
||||
import { SearchBar } from "../components/SearchBar";
|
||||
import { SettingsButton } from "../components/SettingsButton";
|
||||
import { DailyActivity } from "./DashboardCanvasNav/DailyActivity";
|
||||
import { Gas } from "./DashboardCanvasNav/Gas";
|
||||
import { Seismic } from "./DashboardCanvasNav/Seismic";
|
||||
import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing";
|
||||
|
||||
export function DashboardCanvas() {
|
||||
return (
|
||||
<Tabs.Root defaultValue="my dashboard">
|
||||
<Flex
|
||||
as="header"
|
||||
position="sticky"
|
||||
top="0"
|
||||
bg="base200"
|
||||
px={6}
|
||||
py={3}
|
||||
align="center"
|
||||
justify="space-between"
|
||||
>
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="my dashboard">
|
||||
My Dashboard
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="gas">
|
||||
Gas
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="seismic">
|
||||
Seismic
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="remote sensing">
|
||||
Remote Sensing
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="daily activity">
|
||||
Daily Activity
|
||||
</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
|
||||
<HStack>
|
||||
<SearchBar />
|
||||
<SettingsButton />
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
<Tabs.Content value="my dashboard">
|
||||
<WidgetCanvas />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="gas">
|
||||
<Gas />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="seismic">
|
||||
<Seismic />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="remote sensing">
|
||||
<RemoteSensing />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="daily activity">
|
||||
<DailyActivity />
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Box, Text } from "@chakra-ui/react";
|
||||
|
||||
export function DailyActivity() {
|
||||
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">Daily Activity dashboard coming soon.</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Box, Text } from "@chakra-ui/react";
|
||||
|
||||
export function Gas() {
|
||||
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">Gas dashboard coming soon.</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Box, Text } from "@chakra-ui/react";
|
||||
|
||||
export function RemoteSensing() {
|
||||
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">Remote Sensing dashboard coming soon.</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Box, Text } from "@chakra-ui/react";
|
||||
|
||||
export function Seismic() {
|
||||
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">Seismic dashboard coming soon.</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
+1
-1
@@ -4,7 +4,7 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import GridLayout, { WidthProvider } from 'react-grid-layout';
|
||||
import Widget from '../Widget.jsx';
|
||||
import Widget from '../../components/Widget.jsx';
|
||||
import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
|
||||
|
||||
export default function WidgetCanvas() {
|
||||
Reference in New Issue
Block a user