Extract tabs from users layout

BrunoQuaresma · BrunoQuaresma · commit efdae996c41b · 2023-10-18T20:54:13.000Z
diff --git a/site/src/components/Tabs/Tabs.tsx b/site/src/components/Tabs/Tabs.tsx
@@ -0,0 +1,71 @@
+import { ReactNode } from "react";
+import { NavLink, NavLinkProps } from "react-router-dom";
+import { combineClasses } from "utils/combineClasses";
+import { Margins } from "components/Margins/Margins";
+import { css } from "@emotion/css";
+import { useTheme } from "@mui/material/styles";
+
+export const Tabs = ({ children }: { children: ReactNode }) => {
+  return (
+    <div
+      css={(theme) => ({
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        marginBottom: theme.spacing(5),
+      })}
+    >
+      <Margins
+        css={(theme) => ({
+          display: "flex",
+          alignItems: "center",
+          gap: theme.spacing(0.25),
+        })}
+      >
+        {children}
+      </Margins>
+    </div>
+  );
+};
+
+export const TabLink = (props: NavLinkProps) => {
+  const theme = useTheme();
+
+  const baseTabLink = css`
+    text-decoration: none;
+    color: ${theme.palette.text.secondary};
+    font-size: 14px;
+    display: block;
+    padding: ${theme.spacing(0, 2, 2)};
+
+    &:hover {
+      color: ${theme.palette.text.primary};
+    }
+  `;
+
+  const activeTabLink = css`
+    color: ${theme.palette.text.primary};
+    position: relative;
+
+    &:before {
+      content: "";
+      left: 0;
+      bottom: 0;
+      height: 2px;
+      width: 100%;
+      background: ${theme.palette.secondary.dark};
+      position: absolute;
+    }
+  `;
+
+  return (
+    <NavLink
+      className={({ isActive }) =>
+        combineClasses([
+          baseTabLink,
+          isActive ? activeTabLink : undefined,
+          props.className as string,
+        ])
+      }
+      {...props}
+    />
+  );
+};
diff --git a/site/src/components/UsersLayout/UsersLayout.tsx b/site/src/components/UsersLayout/UsersLayout.tsx
@@ -1,25 +1,17 @@
 import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
-import { makeStyles } from "@mui/styles";
 import GroupAdd from "@mui/icons-material/GroupAddOutlined";
 import PersonAdd from "@mui/icons-material/PersonAddOutlined";
 import { USERS_LINK } from "components/Dashboard/Navbar/NavbarView";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
 import { useFeatureVisibility } from "hooks/useFeatureVisibility";
 import { usePermissions } from "hooks/usePermissions";
 import { FC } from "react";
-import {
-  Link as RouterLink,
-  NavLink,
-  Outlet,
-  useNavigate,
-} from "react-router-dom";
-import { combineClasses } from "utils/combineClasses";
+import { Link as RouterLink, Outlet, useNavigate } from "react-router-dom";
 import { Margins } from "components/Margins/Margins";
-import { Stack } from "components/Stack/Stack";
+import { TabLink, Tabs } from "components/Tabs/Tabs";
 
 export const UsersLayout: FC = () => {
-  const styles = useStyles();
   const { createUser: canCreateUser, createGroup: canCreateGroup } =
     usePermissions();
   const navigate = useNavigate();
@@ -53,75 +45,14 @@ export const UsersLayout: FC = () => {
         </PageHeader>
       </Margins>
 
-      <div className={styles.tabs}>
-        <Margins>
-          <Stack direction="row" spacing={0.25}>
-            <NavLink
-              end
-              to={USERS_LINK}
-              className={({ isActive }) =>
-                combineClasses([
-                  styles.tabItem,
-                  isActive ? styles.tabItemActive : undefined,
-                ])
-              }
-            >
-              Users
-            </NavLink>
-            <NavLink
-              to="/groups"
-              className={({ isActive }) =>
-                combineClasses([
-                  styles.tabItem,
-                  isActive ? styles.tabItemActive : undefined,
-                ])
-              }
-            >
-              Groups
-            </NavLink>
-          </Stack>
-        </Margins>
-      </div>
+      <Tabs>
+        <TabLink to={USERS_LINK}>Users</TabLink>
+        <TabLink to="/groups">Groups</TabLink>
+      </Tabs>
 
       <Margins>
         <Outlet />
       </Margins>
     </>
   );
 };
-
-export const useStyles = makeStyles((theme) => {
-  return {
-    tabs: {
-      borderBottom: `1px solid ${theme.palette.divider}`,
-      marginBottom: theme.spacing(5),
-    },
-
-    tabItem: {
-      textDecoration: "none",
-      color: theme.palette.text.secondary,
-      fontSize: 14,
-      display: "block",
-      padding: theme.spacing(0, 2, 2),
-
-      "&:hover": {
-        color: theme.palette.text.primary,
-      },
-    },
-
-    tabItemActive: {
-      color: theme.palette.text.primary,
-      position: "relative",
-
-      "&:before": {
-        content: `""`,
-        left: 0,
-        bottom: 0,
-        height: 2,
-        width: "100%",
-        background: theme.palette.secondary.dark,
-        position: "absolute",
-      },
-    },
-  };
-});
