Header

Code

"use client"

import { MagnifyingGlass } from "@phosphor-icons/react"
import { Banner, DesktopMenu, MobileMenu, NavigationRibbon } from ".."

const Header = () => (
	<div className="flex flex-col items-center justify-between md:justify-evenly w-full">
		<Banner />
		<div className="bg-[#FFEB35] w-full">
			<div className="container flex gap-4 py-4 justify-between items-center w-full">
				<a href="/">
					<h1 className="text-4xl font-bold self-center">Core</h1>
				</a>
				<DesktopMenu />
				<MobileMenu />
			</div>
			<div className="container pb-4 md:hidden">
				<div className="w-full relative flex">
					<input type="text" name="searchTerm" className="flex w-full rounded-lg border-0 py-4 px-8" placeholder="Waar ben je naar op zoek?" />
					<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-8">
						<MagnifyingGlass size={32} />
					</div>
				</div>
			</div>
			<div className="w-full h-[74px] relative hidden md:block">
				<div className="absolute left-0 top-0 right-0 h-auto overflow-hidden bg-gray-800/5">
					<NavigationRibbon className="z-50" />
				</div>
			</div>
		</div>
	</div>
)

export default Header