front-end/src/components/Header.tsx

import classNames from "classnames";
import { useState } from "react";
/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import ContextMenuAction from "./ContextMenuAction";
import ContextMenu from "./ContextMenu";
import Logofreeland from "./Logofreeland";
import { Button } from "./Button/Button";
import Avatar from "./Avatar";
import Navbar from "./Navbar";
import Bell from "./Bell";
import Logo from "./Logo";
import Link from "./Link";

/* -------------------------------------------------------------------------- */
/*                                    Icons                                   */
/* -------------------------------------------------------------------------- */
import { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.svg";
import { ReactComponent as SVGFolder } from "assets/svg/folder.svg";
import { ReactComponent as SVGFile } from "assets/svg/file.svg";
import { ReactComponent as SVGEye } from "assets/svg/eye.svg";

const Header = () => {
  const [authenticated, setAuthenticated] = useState(false);
  const onClick = () => setAuthenticated(true);

  /* -------------------------------------------------------------------------- */
  /*                         Implement Header Component                         */
  /* -------------------------------------------------------------------------- */
  return (
    <header
      className="header flex justify-between items-center  box-border w-full 
                border border-gray-75  
                h-16 
                px-4
                gap-5
                md:gap-20
                lg:gap-40 lg:px-8
                xl:gap-60 xl:px-16"
    >
      {/* Logo and Menu */}
      <div className="flex gap-8 xl:gap-x-16">
        {/* Logo  - start - className="w-7 sm:w-10  " /> */}
        <a className="Logo flex items-center gap-1  sm:gap-2 " href="/">
          <Logo
            className={classNames(authenticated ? "w-10" : "w-7 sm:w-10")}
          />
          <Logofreeland
            className={classNames(authenticated ? "w-28" : "w-20 sm:w-28")}
          />
        </a>
        {/* Logo  - end - */}

        {/* Menu( Create new - My library - About ) Start */}
        <div
          className="hidden lg:flex items-center
             gap-2"
        >
          {/* Link Create now - start -  */}
          <Link className="text-blue-500 px-4 font-bold uppercase" href="#">
            Create new
          </Link>
          {/* Link Create now - end -  */}

          {/* Dropdown Menu My library - start - */}
          <ContextMenu
            emphasis="high"
            button="My library"
            className="border-none uppercase"
          >
            <ContextMenuAction
              caption="My Publications"
              action={() => console.log("My publications")}
              icon={<SVGFile className="stroke-black " />}
            ></ContextMenuAction>

            <ContextMenuAction
              caption="My Favorites"
              action={() => console.log("My Favorites")}
              icon={<SVGFavoriteOutlined className="stroke-black" />}
            ></ContextMenuAction>

            <ContextMenuAction
              caption="My Collections"
              action={() => console.log("My Collections")}
              icon={<SVGFolder className="stroke-black fill-black" />}
            ></ContextMenuAction>

            <ContextMenuAction
              caption="Recent Viewed"
              action={() => console.log("Recent Viewed")}
              icon={<SVGEye className="stroke-black " />}
            ></ContextMenuAction>
          </ContextMenu>
          {/* Dropdown Menu My library - End -  */}

          {/* Dropdown Menu About - start - */}
          <ContextMenu
            emphasis="high"
            button="About"
            className="border-none uppercase"
          >
            <ContextMenuAction
              caption="About Freeland"
              action={() => console.log("About Freeland")}
            ></ContextMenuAction>

            <ContextMenuAction
              caption="Contact Us"
              action={() => console.log("Contact Us")}
            ></ContextMenuAction>

            <ContextMenuAction
              caption="Help"
              action={() => console.log("Help")}
            ></ContextMenuAction>
          </ContextMenu>
          {/* Dropdown Menu About - End - */}
        </div>
        {/* Menu( Create new - My library - About ) End */}
      </div>

      {/* Sign in - Sign up - Notification - Avatar - Burger  */}
      <div className="flex items-center font-bold text-sm gap-1 md:gap-2 ">
        {!authenticated
          ? [
              <Button
                emphasis="low"
                onClick={onClick}
                className="text-xs sm:px-4 sm:text-sm  "
              >
                Sign in
              </Button>,
              <Button
                emphasis="medium"
                className="hidden md:flex"
                onClick={onClick}
              >
                Sign up
              </Button>,
            ]
          : [
              <Button emphasis="low">
                <Button.Icon>
                  <Bell className="h-6 w-6" />
                </Button.Icon>
              </Button>,

              <Button emphasis="low" className="hidden lg:flex">
                <Button.Icon>
                  <Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
                </Button.Icon>
              </Button>,
            ]}
        {/* Burger component will be shown for the small screens */}
        <Navbar className="block lg:hidden" />
      </div>
    </header>
  );
};

export default Header;