Refactor made changes to file structures

2026-06-10 14:00:37 -07:00
parent 305ee4e757
commit baaf162df9
46 changed files with 42 additions and 177 deletions
@@ -0,0 +1,64 @@
+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: "normal",
+    color: "fg.muted",
+    px: 4,                   // Horizontal padding
+    py: 2,                   // Vertical padding
+    borderBottom: "2px solid transparent",
+    mb: "-2px",              // 🔥 The trick: Pulls the active border down to overlap the container's line
+    transition: "all 0.2s",
+    _hover: { color: "fg" },
+    _activeLink: {
+      color: "color",        // Or whatever your primary text color is
+      borderColor: "currentColor", // The active underline
+    }
+  };
+
+  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="2px solid" borderColor="border.muted" gap={2}>
+            <Box as={NavLink} to="/home" end css={tabStyles}>My Dashboard</Box>
+            <Box as={NavLink} to="/home/gas" css={tabStyles}>Gas</Box>
+            <Box as={NavLink} to="/home/seismic" css={tabStyles}>Seismic</Box>
+            <Box as={NavLink} to="/home/remote" css={tabStyles}>Remote Sensing</Box>
+            <Box as={NavLink} to="/home/daily" css={tabStyles}>Daily Activity</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>
+  );
+}