frontend/src/components/Header.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import "../styles/button.css";
import "../styles/header.css";
import Logo from "./Logo";
import userIcon from "../assets/user-icon.svg";
import type { AuthorizedUser } from "../types/login";

type Props = {
    user: AuthorizedUser;
    logout: () => Promise<void>;
};

function Header({ user, logout }: Props) {
    return (
        <header className="header">
            <Logo />

            <div className="header-user">
                <span className="header-user-info">
                    <img src={userIcon} alt="User Icon" />
                    <p>{user?.email}</p>
                </span>

                <button className="btn btn-stop btn-logout" onClick={logout}>
                    Logout
                </button>
            </div>
        </header>
    );
}

export default Header;