digifi-www/src/components/Header/Header.tsx

import { useState, ChangeEvent, FC } from "react";
import Logo from "../../assets/icons/logo.svg";
import Button from "../shared/Button";
import { lowerMenuItems } from "../../utils/data";
import Sidebar from "./Sidebar";
import { Link } from "react-router-dom";

type LowerMenuItem = {
  id: string | number;
  name: string;
};

type HiddenMenuItems = {
  hideSidebar?: boolean;
  hideMenu?: boolean;
};

const Header: FC<HiddenMenuItems> = ({
  hideSidebar = false,
  hideMenu = false,
}) => {
  const [searchValue, setSearchValue] = useState<string>("");
  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);

  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
    setSearchValue(e.target.value);
  };

  const toggleSidebar = () => {
    setIsSidebarOpen((prev) => !prev);
  };

  return (
    <div className="relative my-2 py-2 flex items-center justify-center border-b-2 border-[#E3DEDA]">
      {!hideSidebar && (
        <Sidebar toggleSidebar={toggleSidebar} isSidebarOpen={isSidebarOpen} />
      )}

      <div className="containerMode flex justify-between gap-1 xl:gap-8">
        <Link to="/">
          <img
            src={Logo}
            alt="Logo"
            className="w-[90px] h-[90px] xl:w-[117px] xl:h-[117px]"
          />
        </Link>

        {!hideMenu && (
          <div className="flex flex-col-reverse lg:flex-col grow lg:grow-0 justify-between items-end">
            <ul className="flex gap-0 lg:gap-[10px] items-center justify-end w-full flex-wrap">
              {["Open An Account", "Internet Banking", "Contact Us"].map(
                (text: string) => (
                  <li key={text} className="hidden sm:flex">
                    <a href="#">
                      <Button
                        className={
                          text === "Open An Account" ? "btn-active" : ""
                        }
                        text={text}
                      />
                    </a>
                  </li>
                )
              )}
              <li className="w-full lg:w-fit">
                <SearchInput
                  onChange={handleSearchChange}
                  value={searchValue}
                />
              </li>
            </ul>
            <div className="flex lg:hidden">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1"
                strokeLinecap="round"
                strokeLinejoin="round"
                onClick={toggleSidebar}
                className="w-6 h-6 stroke-[#A6368C]"
              >
                <path
                  fillRule="evenodd"
                  d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
                  clipRule="evenodd"
                />
              </svg>
            </div>
            <ul className="hidden lg:flex gap-[10px] items-center justify-end flex-wrap">
              {lowerMenuItems.map((item: LowerMenuItem) => (
                <li
                  key={item.id}
                  className="cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]"
                >
                  {item.name}
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </div>
  );
};

export default Header;

const SearchInput = ({
  value,
  onChange,
}: {
  value: string;
  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
}) => {
  return (
    <div className="flex items-center border border-[#5A2C82] overflow-hidden w-full">
      <input
        type="text"
        value={value}
        onChange={onChange}
        className="py-[6px] px-[12px] w-full outline-none text-[#333] text-sm"
        placeholder="Search..."
      />
      <button
        type="button"
        className="flex items-center justify-center bg-transparent text-[#5A2C82] py-[4px] px-[12px]"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth={1.5}
          stroke="currentColor"
          className="w-6 h-6"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="m21 21-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
          />
        </svg>
      </button>
    </div>
  );
};