tab initial integration

client/src/components/navigation/Tabs/index.tsx

+import { NavLink } from 'react-router-dom';
 import './tabs.scss';
 
 interface Tab {
     route: string,
-    label: string    
+    label: string
 }
 
 interface Props {
-    tabs: [Tab, Tab]
+    tabs: Tab[]
 }
 
-export default function Tabs({tabs}: Props) {
-
+export default function Tabs({ tabs }: Props) {
+    return (
+        <nav className="tabs-container">
+            {tabs.map((tab) => (
+                <NavLink key={tab.route} className="tab" exact activeClassName="active" to={tab.route}>
+                    {tab.label}
+                </NavLink>
+            ))}
+        </nav>
+    );
 }
\ No newline at end of file

client/src/components/navigation/Tabs/tabs.scss

+@use 'styles/settings.scss'as s;
+
+.tabs-container {
+    display: flex;
+    justify-content: space-between;
+    background: rgba(s.$white, 0.25);
+
+    .tab {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: calc(50% - 20px);
+        height: 50px;
+        color: s.$body-color;
+        font-weight: s.$weight-semi-bold;
+        font-size: 14px;
+        position: relative;
+
+        &:before {
+            content: ' ';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translate(-50%, 50%) scaleX(0);
+            height: 5px;
+            width: 30px;
+            background: s.$primary;
+            border-radius: 3px;
+            transition: s.$transition;
+        }
+
+        &.active {
+            font-weight: s.$weight-bold;
+            font-size: 16px;
+
+            &:before {
+                transform: translate(-50%, 50%) scaleX(1);
+            }
+        }
+    }
+}

client/src/components/ui/DetailBox/detail-box.scss

@@ -57,5 +57,4 @@
             font-size: 14px;
         }
     }
-
-}
+}
\ No newline at end of file

client/src/components/ui/DetailGrid/detail-grid.scss

@@ -18,4 +18,4 @@
             width: calc(20% - 32px);
         }
     }
-}
+}
\ No newline at end of file

client/src/components/ui/DetailGrid/index.tsx

@@ -11,7 +11,7 @@ export default function DetailGrid({ details }: Props) {
         <div className="detail-grid">
             {
                 details.map((detail) => (
-                    <div className="box-container">
+                    <div key={detail.title} className="box-container">
                         <DetailBox {...detail} />
                     </div>
                 ))

client/src/pages/AppWrapper.tsx

@@ -21,7 +21,7 @@ export default function AppWrapper() {
                 <ProtectedRoute path="/projects" component={Projects} />
                 <ProtectedRoute path="/stats" component={Stats} />
                 <ProtectedRoute path="/teams/:uuid/edit" component={TeamsEdit} />
-                <ProtectedRoute path="/teams" exact component={Teams} />
+                <ProtectedRoute path={["/teams", "/teams/:tab"]} exact component={Teams} />
                 <ProtectedRoute path="/settings" component={Settings} />
             </Suspense>
         </Header>

client/src/pages/Teams/index.tsx

@@ -2,6 +2,12 @@ import './teams.scss';
 import Page from 'components/ui/Page';
 import DetailGrid from 'components/ui/DetailGrid';
 import ButtonLink from 'components/navigation/ButtonLink';
+import Tabs from 'components/navigation/Tabs';
+import { useParams } from 'react-router';
+
+interface Params {
+    tab: string
+}
 
 export default function Teams() {
     const teamDetails = [{
@@ -12,15 +18,30 @@ export default function Teams() {
         icon: 'folder',
         title: 'Projects',
         number: 3
-    }]
+    }];
+
+    const tabs = [{
+        route: '/teams',
+        label: 'Members',
+    }, {
+        route: '/teams/stats',
+        label: 'Stats'
+    }];
+
+    const {tab} = useParams<Params>();
+
+
     return (
         <Page className="teams-page">
             <div className="content-container">
                 <h1 className="underlined">Teams</h1>
                 <DetailGrid details={teamDetails} />
                 <ButtonLink href="/teams/uuid/edit" routing={true} className="expanded">
-                     Edit
+                    Edit
                 </ButtonLink>
+                <Tabs tabs={tabs} />
+                {!tab && (<h2>Members</h2>)}
+                {tab === "stats" && (<h2>Stats</h2>)}
             </div>
         </Page>
     )

client/src/pages/Teams/teams.scss

@@ -2,4 +2,4 @@
     .button {
         margin: 25px 0;
     }
-}
+}
\ No newline at end of file