Created the Header.jsx component

src/states/Manage/components/Header/Header.jsx

@@ -0,0 +1,48 @@
+import "./styles.sass";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faPowerOff} from "@fortawesome/free-solid-svg-icons";
+import {UserContext} from "@/states/Manage/contexts/UserProvider";
+import {useContext} from "react";
+import {useNavigate} from "react-router-dom";
+
+export const getAvatar = (user) => {
+    let avatar = "https://cdn.discordapp.com/";
+
+    if (user.avatarId !== null) {
+        avatar += `avatars/${user.clientId}/${user.avatarId}.webp?size=128`;
+    } else {
+        avatar += `embed/avatars/1.png`;
+    }
+
+    return avatar;
+}
+
+export const Header = ({title, coins}) => {
+    const user = useContext(UserContext);
+
+    const navigate = useNavigate();
+
+    if (!user) return null;
+
+    const logout = () => {
+        localStorage.removeItem("token");
+        navigate("/auth");
+    }
+
+    return (
+        <header>
+            <h2>{title}</h2>
+
+            <div className="action-area">
+                <div className="user-card">
+                    <img src={getAvatar(user)} alt="avatar"/>
+                    <h1>{user.username}</h1>
+                </div>
+
+                <button className="logout-btn" onClick={logout}>
+                    <FontAwesomeIcon icon={faPowerOff} />
+                </button>
+            </div>
+        </header>
+    );
+}