Function Header

src/components/Header.tsx:10–150

()

const Header: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isPopupOpen, setIsPopupOpen] = useState(false);
  const themeLinkRef = useRef<HTMLAnchorElement>(null);


  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };
  const togglePopup = () => {
    setIsPopupOpen(!isPopupOpen);
  };
 
  // const { logo, brand } = siteConfig;
  const { brand,logo,links, cta, mobileMenu } = navbarConfig;
  
  const IconOrPath = getIconByName(logo);


  return (
    <header className="max-w-7xl bg-navbar-bg mx-auto px-8 py-5 flex items-center justify-between md:py-10" id='Navbar'>
        <div className="flex flex-row items-center align-middle gap-1 md:w-40 ">
            {/* <motion.img src={logo} alt={`${brand} Logo`} fetchPriority='high' className='w-8 h-8 text-logo-text-color'
            whileHover={{ scale: 1.1 }}
            transition={{ type: 'spring', stiffness: 200 }}
            /> */}
            <motion.div
            className="text-logo-icon-color"
            whileHover={{ scale: 1.1 }}
            transition={{ type: 'spring', stiffness: 200 }}
            >
              {typeof IconOrPath === 'string' ? (
                <img src={IconOrPath} alt={brand} />
              ) : (
                <IconOrPath size={30} weight="fill" />
              )}
            </motion.div>
            <h1 className="text-logo-text-color text-xl font-semibold">{brand}</h1>
        </div>
        <nav className="flex items-center pl-12 md:pl-20 gap-4 md:gap-4">
        <div className="hidden md:flex items-center space-x-4">
          {links.map((link, index) => (
            <a key={index} href={link.href} className="text-foreground-hsl/95 font-brico hover:text-foreground-hsl/75 hover:underline  px-3 py-2">
              {link.text}
            </a>
          ))}
        </div>
          <div className="hidden md:flex items-center md:flex-row md:gap-3 ">
          <a 
          ref={themeLinkRef}
          className="cursor-pointer bg-transparent border font-brico text-nav-normal-btn-text border-navbar-border-color shadow-sm hover:border-nav-links-color px-4 py-2 rounded-lg flex flex-row items-center gap-2 transition delay-75 group"
          onClick={(e) => {
            e.preventDefault();
            togglePopup();
          }}
          >
                Themes
                <PaintBucket size={20} weight='bold' />