64 lines
2.4 KiB
React
64 lines
2.4 KiB
React
import { HStack, Flex, Box } from "@chakra-ui/react";
|
|
import { NavLink, Outlet, useLocation } from "react-router-dom";
|
|
import { SearchBar } from "../../components/dashboard/SearchBar.jsx";
|
|
import { SettingsButton } from "../../components/dashboard/SettingsButton.jsx";
|
|
|
|
export default function Home() {
|
|
const location = useLocation();
|
|
const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/";
|
|
|
|
// 1. CSS making this look like how we want it, TODO turn to theme?
|
|
const tabStyles = {
|
|
fontSize: "lg",
|
|
fontWeight: "bold",
|
|
color: "fg.muted",
|
|
px: 2, // Horizontal padding
|
|
// py: 2, // Vertical padding
|
|
borderBottom: "1px solid transparent",
|
|
transition: "all 0.2s",
|
|
_hover: { color: "fg" },
|
|
|
|
"&.active": { // Target the active class applied by React Router NavLink
|
|
color: "fg",
|
|
borderColor: "fg",
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Flex direction="column" height="100%" width="100%">
|
|
|
|
{/* 2. 🛠️ SUB HEADER: Matches your original padding and background */}
|
|
<Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="base200" p={5} align="center" justify="space-between" width="100%">
|
|
|
|
{/* TABS CONTAINER - Replicates the Tabs.List line container */}
|
|
<Flex borderBottom="1px solid" borderColor="fg.muted" gap={2}>
|
|
<Box as={NavLink} to="/home" end css={tabStyles}>My Dashboard</Box>
|
|
<Box as={NavLink} to="/home/daily" css={tabStyles}>Daily Activity</Box>
|
|
<Box as={NavLink} to="/home/gas" css={tabStyles}>Gas</Box>
|
|
<Box as={NavLink} to="/home/remote" css={tabStyles}>Remote Sensing</Box>
|
|
<Box as={NavLink} to="/home/seismic" css={tabStyles}>Seismic</Box>
|
|
</Flex>
|
|
|
|
{/* EDIT MODE BUTTONS & CONTROLS */}
|
|
<HStack width="258px" justifyContent="flex-end">
|
|
{isPersonalDashboard ? (
|
|
<>
|
|
<SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
|
|
{/* This will eventually trigger your Zustand store's edit mode! */}
|
|
<SettingsButton />
|
|
</>
|
|
) : (
|
|
<SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
|
|
)}
|
|
</HStack>
|
|
|
|
</Flex>
|
|
|
|
{/* 3. 🛠️ CANVAS AREA */}
|
|
<Flex flex="1" overflow="auto">
|
|
<Outlet />
|
|
</Flex>
|
|
|
|
</Flex>
|
|
);
|
|
} |