Toggle Tabs | Settings | Schedule

components/common/ToggleTabs/ToggleTabs.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Divider, Stack } from '@mui/material';
+
+const TabShell = styled('div')`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex-flow: row wrap;
+  justify-content: flex-end;
+  border: 1px solid black;
+  border-radius: 6px;
+  overflow: hidden;
+`;
+
+const Tab = styled(Stack)`
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease;
+`;
+
+export const ToggleTabs = ({
+  tabs,
+  tabValue,
+  setTabValue,
+  tabColor
+}) => {
+  return (
+    <TabShell>
+      {tabs?.map((tab, index) => {
+        return (
+          <Stack
+            key={`${tab?.value}-stack`}
+            direction='row'
+          >
+            <Tab
+              key={tab?.value}
+              onClick={() => {
+                setTabValue(tab)
+              }}
+              style={{
+                backgroundColor: tabValue?.value === tab?.value ? tabColor : 'transparent',
+                color: tabValue?.value === tab?.value ? 'white' : 'black'
+              }}
+            >
+              {tab?.label}
+            </Tab>
+            {index < tabs?.length - 1 && (
+              <Divider orientation="vertical" variant="middle" flexItem />
+            )}
+          </Stack>
+        )
+      })}
+    </TabShell>
+  );
+};

components/common/ToggleTabs/index.js

@@ -0,0 +1 @@
+export { ToggleTabs } from './ToggleTabs';

components/common/index.js

@@ -0,0 +1 @@
+export { ToggleTabs } from './ToggleTabs';

components/core/Shell/NavBar/NavBar.jsx

@@ -35,9 +35,7 @@ const NavGroup = styled(Stack)`
 `;
 
 const Title = styled('p')`
-  &:hover {
+  cursor: pointer;
-    cursor: pointer;
-  }
 `;
 
 const Tab = styled('div')`
@@ -63,14 +61,10 @@ const SlidingIndicator = styled('div')`
   position: absolute;
   bottom: -6px;
   height: 2px;
-  background-color: red;
+  background-color: #4D79FF;
   transition: left 0.3s ease, width 0.3s ease;
 `;
 
-const UserButton = styled(Stack)`
-  width: 100%;
-`;
-
 const Border = styled('div')`
   height: 2px;
   width: 100%;

components/index.js

@@ -1,2 +1,3 @@
+export * from './common';
 export * from './core';
 export * from './stores';

src/pages/Schedule/Schedule.jsx

@@ -2,15 +2,14 @@ import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 export const Schedule = () => {
-
   useEffect(() => {
     document.title = 'ShiftSync | Schedule';
   }, []);
 
   return (
     <div>
-      <h1>Schedule Page</h1>
+        <h1>Schedule Page</h1>
-      <Link to="/">Go to Home</Link>
+        <Link to="/">Go to Home</Link>
     </div>
   );
 };

src/pages/Settings/Settings.jsx

@@ -1,7 +1,30 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
+import { Stack } from '@mui/material';
+import { ToggleTabs } from '@components';
+
+const OuterContainer = styled(Stack)`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding: 10px 10px 0px 0px;
+`;
 
 export const Settings = () => {
+  const tabs = [
+      {
+          label: 'Personal',
+          value: 'personal'
+      },
+      {
+          label: 'Organization',
+          value: 'org'
+      }
+  ];
+
+  const [tabValue, setTabValue] = useState(tabs[0]);
 
   useEffect(() => {
     document.title = 'ShiftSync | Settings';
@@ -9,6 +32,14 @@ export const Settings = () => {
 
   return (
     <div>
+      <OuterContainer>
+        <ToggleTabs 
+            tabs={tabs}
+            tabValue={tabValue}
+            setTabValue={setTabValue}
+            tabColor='#4D79FF'
+        />
+      </OuterContainer>
       <h1>Settings Page</h1>
       <Link to="/">Go to Home</Link>
     </div>

src/router/AppRouter.jsx

@@ -9,12 +9,15 @@ const AppRouter = () => {
 
   useEffect(() => {
     setUser({
-      firstName: 'Matt',
+      firstName: 'ShiftSync',
-      lastName: 'DiMeglio',
+      lastName: 'Test-User',
-      email: 'mdimeglio@shift-sync.com',
+      email: 'testuser@shift-sync.com',
+      scheduler: false,
+      manager: true,
       isAdmin: false
     })
   }, []);
+
   return (
     <Shell>
       <Routes>