front-end/src/components/parts/Header.tsx

import classNames from "classnames";
import { useState } from "react";
/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import ContextMenuAction from "../drop-down-menu/ContextMenuAction";
import ContextMenu from "../drop-down-menu/ContextMenu";
import Logofreeland from "../Logofreeland";
import { Button } from "../Button/Button";
import Avatar from "../Avatar";
import Navbar from "../Navbar";
import Logo from "../Logo";
import { RouterLink } from "components/typography/RouterLink";

/* -------------------------------------------------------------------------- */
/*                                    Icons                                   */
/* -------------------------------------------------------------------------- */
import {
  SVGBellNotification,
  SVGBell,
  SVGFavoriteOutlined,
  SVGFolder,
  SVGFile,
  SVGEye,
} from "components/icons";

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

  /* -------------------------------------------------------------------------- */
  /*                         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 -  */}
          <RouterLink
            className="text-blue-500 px-4 font-bold uppercase"
            to="/create-new"
          >
            Create new
          </RouterLink>
          {/* 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>
                  {!notification ? (
                    <SVGBell className="h-6 w-6 fill-gray-900 stroke-gray-900" />
                  ) : (
                    <SVGBellNotification className="h-6 w-6 fill-gray-900 stroke-gray-900" />
                  )}
                </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;