feat: add component navbar

src/components/Navbar/Navbar.module.scss

@@ -0,0 +1,24 @@
+.navbar {
+  height: var(--nav-size);
+  background-color: var(--black-medium);
+  padding: 0 1rem;
+  border-bottom: 1px solid #474a4d;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.navbarNav {
+  max-width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.icon {
+  cursor: pointer;
+}
+
+.logo {
+  width: 90px;
+}

src/components/Navbar/index.tsx

@@ -0,0 +1,28 @@
+import { IoArrowBackOutline } from 'react-icons/io5';
+import { useNavigate } from 'react-router-dom';
+
+import logo from 'assets/Logo.png';
+import { NavBarProps } from 'types/IComponents';
+
+import styles from './Navbar.module.scss';
+
+export function Navbar(props: NavBarProps) {
+  const navigate = useNavigate();
+  return (
+    <>
+      <nav className={styles.navbar}>
+        {props.back && (
+          <IoArrowBackOutline
+            size={24}
+            className={styles.icon}
+            onClick={() => {
+              navigate('/');
+            }}
+          />
+        )}
+        {props.logo && <img src={logo} alt="Logo" className={styles.logo} />}
+        <ul className={styles.navbarNav}>{props.children}</ul>
+      </nav>
+    </>
+  );
+}