Extracted nav pills to their own component for reusability

src/utils/NavPills.scss

@@ -0,0 +1,30 @@
+@import './base';
+
+.nav-pills__nav {
+  position: sticky !important;
+  top: $headerHeight - 1px;
+  z-index: 2;
+}
+
+.nav-pills__nav-link {
+  border-radius: 0 !important;
+  padding-bottom: calc(.5rem - 3px) !important;
+  border-bottom: 3px solid transparent;
+  color: #5d6778;
+  font-weight: 700;
+  cursor: pointer;
+
+  @media (min-width: $smMin) and (max-width: $mdMax) {
+    font-size: 89%;
+  }
+}
+
+.nav-pills__nav-link:hover {
+  color: $mainColor !important;
+}
+
+.nav-pills__nav-link.active {
+  border-color: $mainColor;
+  background-color: var(--primary-color) !important;
+  color: $mainColor !important;
+}

src/utils/NavPills.tsx

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+import { Card, Nav, NavLink } from 'reactstrap';
+import { NavLink as RouterNavLink } from 'react-router-dom';
+import './NavPills.scss';
+
+interface NavPillsProps {
+  items: { children: ReactNode; to: string; replace?: boolean }[];
+}
+
+export const NavPills: FC<NavPillsProps> = ({ items }) => (
+  <Card className="nav-pills__nav p-0 overflow-hidden mb-3" body>
+    <Nav pills fill>
+      {items.map(({ children, ...rest }, index) =>
+        <NavLink key={index} className="nav-pills__nav-link" tag={RouterNavLink} {...rest}>{children}</NavLink>)}
+    </Nav>
+  </Card>
+);