Add section selector component

src/components/SectionSelector/index.tsx

@@ -0,0 +1,34 @@
+import { Wrapper } from './styles';
+
+type SectionSelectorProps = {
+  icon: React.SVGProps<SVGSVGElement>;
+  text: string;
+  color: 'client' | 'productOwner' | 'developer' | 'admin';
+  selected?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+};
+
+const SectionSelector = ({
+  icon,
+  text,
+  color,
+  selected = false,
+  disabled = false,
+  onClick,
+}: SectionSelectorProps) => {
+  return (
+    <Wrapper
+      color={color}
+      icon={icon}
+      selected={selected}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {icon && <span className='icon left'>{icon}</span>}
+      {text}
+    </Wrapper>
+  );
+};
+
+export default SectionSelector;

src/components/SectionSelector/styles.ts

@@ -0,0 +1,119 @@
+import styled, { css } from 'styled-components';
+
+type WrapperProps = {
+  icon: React.SVGProps<SVGSVGElement>;
+  color: 'client' | 'productOwner' | 'developer' | 'admin';
+  selected: boolean;
+  disabled: boolean;
+};
+
+export const Wrapper = styled.div<WrapperProps>`
+  width: 100%;
+  height: auto;
+  max-height: 50px;
+  padding: 15px 20px;
+  border-radius: 10px;
+  user-select: none;
+  cursor: pointer;
+
+  ${({ icon }) => {
+    if (icon)
+      return css`
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      `;
+    return '';
+  }}
+
+  .icon svg {
+    display: flex;
+    align-items: center;
+  }
+
+  .icon.left {
+    margin-right: 0.5rem;
+  }
+
+  ${({ color, theme, selected }) => {
+    switch (color) {
+      case 'client':
+        return css`
+          color: ${selected
+            ? theme.colors.client.main
+            : theme.colors.black.main};
+          background: ${selected ? theme.colors.client.light : 'none'};
+
+          svg path {
+            stroke: ${selected
+              ? theme.colors.client.main
+              : theme.colors.black.main};
+          }
+        `;
+      case 'productOwner':
+        return css`
+          color: ${selected
+            ? theme.colors.productOwner.main
+            : theme.colors.black.main};
+          background: ${selected ? theme.colors.productOwner.light : 'none'};
+
+          svg path {
+            stroke: ${selected
+              ? theme.colors.productOwner.main
+              : theme.colors.black.main};
+          }
+        `;
+      case 'developer':
+        return css`
+          color: ${selected
+            ? theme.colors.developer.main
+            : theme.colors.black.main};
+          background: ${selected ? theme.colors.developer.light : 'none'};
+
+          svg path {
+            stroke: ${selected
+              ? theme.colors.developer.main
+              : theme.colors.black.main};
+          }
+        `;
+      case 'admin':
+        return css`
+          color: ${selected
+            ? theme.colors.admin.main
+            : theme.colors.black.main};
+          background: ${selected ? theme.colors.admin.light : 'none'};
+
+          svg path {
+            stroke: ${selected
+              ? theme.colors.admin.main
+              : theme.colors.black.main};
+          }
+        `;
+      default:
+        return css`
+          color: ${selected
+            ? theme.colors.client.main
+            : theme.colors.black.main};
+          background: ${selected ? theme.colors.client.light : 'none'};
+
+          svg path {
+            stroke: ${selected
+              ? theme.colors.client.main
+              : theme.colors.black.main};
+          }
+        `;
+    }
+  }}
+
+  ${({ disabled, theme }) =>
+    disabled &&
+    css`
+      cursor: default;
+      color: ${theme.colors.gray.main};
+      background: none;
+
+      svg path {
+        stroke: ${theme.colors.gray.main};
+      }
+    `};
+`;

src/components/index.tsx

@@ -17,6 +17,7 @@ import Navbar from './Navbar';
 import Sidebar from './Sidebar';
 import ProtectedRoute from './ProtectedRoute';
 import AuthRoute from './AuthRoute';
+import SectionSelector from './SectionSelector';
 
 export {
   Button,
@@ -38,4 +39,5 @@ export {
   Sidebar,
   ProtectedRoute,
   AuthRoute,
+  SectionSelector,
 };