import Link from 'next/link'; import { Suspense } from 'react'; import { Bars3Icon, MagnifyingGlassIcon, ShoppingBagIcon, UserIcon } from '@heroicons/react/24/outline'; import Logo from 'components/icons/logo'; import { SearchSkeleton } from './search'; export async function Navbar() { return ( <nav className="absolute left-0 top-0 z-10 flex w-full items-center px-[4.38rem] py-[3.12rem]"> <div className="flex w-full items-center justify-between"> {/* burger menu */} <div className="block flex-none"> <Bars3Icon width={24} height={24} color="white" /> </div> {/* logo */} <div className="justify-center md:flex md:w-1/3"> <Suspense fallback={<SearchSkeleton />}> <Link href="/" prefetch={true}> <Logo /> </Link> </Suspense> </div> {/* 3 icons */} <div className="flex justify-between gap-[1.88rem]"> <MagnifyingGlassIcon width={16} height={16} color="white" /> <UserIcon width={16} height={16} fill="white" color="white" /> <ShoppingBagIcon width={16} height={16} fill="white" color="white" /> </div> </div> </nav> ); }