61 lines
2.4 KiB
React
61 lines
2.4 KiB
React
import {HStack, Flex, Box, useRecipe, useSlotRecipe} 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";
|
|
|
|
// 1. Import your icons (Swap these for whichever you prefer!)
|
|
import {LayoutDashboard, CalendarDays, Cloud, Satellite, Activity} from "lucide-react";
|
|
|
|
// 2. Define the tabs array
|
|
const HOME_TABS = [
|
|
{name: "My Dashboard", url: "/home", icon: LayoutDashboard, exact: true},
|
|
{name: "Daily Activity", url: "/home/daily", icon: CalendarDays},
|
|
{name: "Gas", url: "/home/gas", icon: Cloud},
|
|
{name: "Remote Sensing", url: "/home/remote", icon: Satellite},
|
|
{name: "Seismic", url: "/home/seismic", icon: Activity},
|
|
];
|
|
|
|
export default function Home() {
|
|
const glassTabsRecipe = useRecipe({key: "glassTab"});
|
|
const homeRecipe = useSlotRecipe({key: "home"});
|
|
const glassTabsStyle = glassTabsRecipe();
|
|
const homeStyle = homeRecipe();
|
|
|
|
const location= useLocation();
|
|
const isPersonalDashboard= location.pathname === "/home" || location.pathname === "/home/";
|
|
|
|
return (
|
|
<Flex css={homeStyle.root}>
|
|
<Flex as="header" css={homeStyle.header}>
|
|
{/* TABS CONTAINER */}
|
|
<Flex>
|
|
{HOME_TABS.map((tab) => {
|
|
const Icon = tab.icon;
|
|
return (
|
|
<Box key={tab.name} as={NavLink} to={tab.url} end={tab.exact} css={glassTabsStyle}> {/* CRITICAL: 'end' prop forces exact match so "/home" deactivates on sub-routes*/}
|
|
{/* flexShrink: 0 ensures the icon never squishes during the gooey animation */}
|
|
<Icon size={24} style={{flexShrink: 0}}/>
|
|
<Box as="span">{tab.name}</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
|
|
{/* The Settings button is now inline with the tabs and only renders on the personal dashboard */}
|
|
{isPersonalDashboard && <SettingsButton/>}
|
|
</Flex>
|
|
|
|
{/* EDIT MODE BUTTONS & CONTROLS */}
|
|
{/* Leaving this HStack here in case you plan to put the SearchBar or other global tools back on the right side */}
|
|
<HStack width="258px" justifyContent="flex-end">
|
|
{/* Future global controls go here */}
|
|
</HStack>
|
|
</Flex>
|
|
|
|
{/* TABS CONTENT */}
|
|
<Flex css={homeStyle.body}>
|
|
<Outlet/>
|
|
</Flex>
|
|
|
|
</Flex>
|
|
);
|
|
} |