feat: add component header

src/components/Header/Header.module.scss

@@ -0,0 +1,64 @@
+.header {
+  display: flex;
+  width: 100%;
+  height: 144px;
+  align-items: center;
+
+  background: var(--black-medium);
+  top: 0;
+  position: sticky;
+}
+
+.logo {
+  width: 137px;
+  height: 80px;
+  margin-left: 160px;
+}
+
+.avatar {
+  width: 42px;
+  height: 42px;
+  border-radius: 42px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+}
+
+.user {
+  display: flex;
+  align-items: center;
+  margin-left: 40px;
+  height: 100px;
+  width: 80%;
+}
+
+.bemVindo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 1rem;
+  color: var(--gray);
+  font-size: 16px;
+
+  p {
+    margin-top: 0;
+    color: var(--orange);
+    font-size: 16px;
+
+    cursor: pointer;
+  }
+}
+
+.icon {
+  color: var(--gray);
+  cursor: pointer;
+  margin-right: 40px;
+
+  &:hover {
+    color: var(--orange);
+    filter: brightness(0.8);
+    transition: 0.4s;
+  }
+}

src/components/Header/index.tsx

@@ -0,0 +1,62 @@
+import { IoMdLogOut, IoMdMoon, IoMdSunny } from 'react-icons/io';
+import { IoArrowBackOutline } from 'react-icons/io5';
+import { useNavigate } from 'react-router-dom';
+
+import logo from 'assets/Logo.png';
+import Avvvatars from 'avvvatars-react';
+import { HeaderProps } from 'types/IComponents';
+
+import { useTheme } from 'contexts/Theme';
+
+import { useAuth } from 'hooks/useAuth';
+
+import styles from './Header.module.scss';
+
+export function Header(props: HeaderProps) {
+  const navigate = useNavigate();
+  const { theme, switchTheme } = useTheme();
+  const { handleLogout } = useAuth();
+
+  return (
+    <div className={styles.header}>
+      {props.logo && <img src={logo} alt="Logo" className={styles.logo} />}
+      <div className={styles.user}>
+        {props.back && <IoArrowBackOutline size={32} className={styles.icon} onClick={() => navigate('/')} />}
+        {props.default ? (
+          <>
+            {props.profile ? (
+              <img src={props.profile} alt="Avatar" className={styles.avatar} />
+            ) : (
+              <Avvvatars value={props.avatar || ''} size={42} />
+            )}
+          </>
+        ) : null}
+
+        {props.name && (
+          <div className={styles.bemVindo}>
+            Bem vindo,
+            <p
+              onClick={() => {
+                navigate('/profile');
+              }}
+            >
+              {props.name}
+            </p>
+          </div>
+        )}
+      </div>
+      <div
+        onClick={() => {
+          switchTheme();
+        }}
+      >
+        {theme === 'light' ? (
+          <IoMdMoon size={32} className={styles.icon} />
+        ) : (
+          <IoMdSunny size={32} className={styles.icon} />
+        )}
+      </div>
+      <IoMdLogOut onClick={() => handleLogout()} size={32} className={styles.icon} />
+    </div>
+  );
+}