feat: add component ocupação

src/components/Ocupacao/Ocupacao.module.scss

@@ -0,0 +1,19 @@
+.ocupacao {
+  display: flex;
+  width: 100%;
+  height: 30px;
+  justify-content: space-around;
+  align-items: center;
+  text-align: center;
+
+  p {
+    color: var(--gray);
+    cursor: pointer;
+    margin-top: 0;
+  }
+}
+
+.active {
+  color: var(--orange) !important;
+  text-decoration: underline;
+}

src/components/Ocupacao/index.tsx

@@ -0,0 +1,27 @@
+import { useAuth } from 'hooks/useAuth';
+
+import styles from './Ocupacao.module.scss';
+
+export function Ocupacao() {
+  const { ocupacao, setOcupacao } = useAuth();
+
+  return (
+    <div className={styles.ocupacao}>
+      {ocupacao === 'cliente' ? (
+        <p className={styles.active} onClick={() => setOcupacao('cliente')}>
+          Sou cliente
+        </p>
+      ) : (
+        <p onClick={() => setOcupacao('cliente')}>Sou cliente</p>
+      )}
+
+      {ocupacao === 'barbeiro' ? (
+        <p className={styles.active} onClick={() => setOcupacao('barbeiro')}>
+          Sou barbeiro
+        </p>
+      ) : (
+        <p onClick={() => setOcupacao('barbeiro')}>Sou barbeiro</p>
+      )}
+    </div>
+  );
+}