import { FC } from 'react' import Link from 'next/link' import s from './Navbar.module.css' import NavbarRoot from './NavbarRoot' import { Logo, Container } from '@components/ui' import { Searchbar, UserNav } from '@components/common' interface Link { href: string label: string } interface NavbarProps { links?: Link[] } console.log('COMMERCE_PROVIDER: ', process.env.COMMERCE_PROVIDER) console.log( 'NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN: ', process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ) console.log( 'NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN: ', process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN ) console.log( 'NEXT_PUBLIC_COMMERCE_SEARCH_ENABLED: ', process.env.NEXT_PUBLIC_COMMERCE_SEARCH_ENABLED ) const Navbar: FC<NavbarProps> = ({ links }) => ( <NavbarRoot> <Container clean className="mx-auto max-w-8xl px-6"> <div className={s.nav} data-test="navbar"> <div className="flex items-center flex-1"> <Link href="/"> <a className={s.logo} aria-label="Logo" data-test="logo"> <Logo /> </a> </Link> <nav className={s.navMenu}> <Link href="/search"> <a className={s.link} data-test="nav-link-search"> All </a> </Link> {links?.map((l) => ( <Link href={l.href} key={l.href}> <a className={s.link} data-test={`nav-link-home-page-${l.label}`} > {l.label} </a> </Link> ))} </nav> </div> {true && ( <div className="justify-center flex-1 hidden lg:flex"> <Searchbar /> </div> )} <div className="flex items-center justify-end flex-1 space-x-8"> <UserNav /> </div> </div> {true && ( <div className="flex pb-4 lg:px-6 lg:hidden"> <Searchbar id="mobile-search" /> </div> )} </Container> </NavbarRoot> ) export default Navbar