40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
|
|
import { Searchbar } from '@/components/search-bar'
|
|
import { Button } from '@/components/button'
|
|
import { Navbar } from '@/components/navbar'
|
|
import { MobileNav } from '@/components/mobile-nav'
|
|
|
|
export const Header = () => (
|
|
<header className="w-full h-36 fixed top-0 shadow-header px-4 sm:px-6 pt-4 sm:pt-6 bg-white z-10">
|
|
<div className="w-full max-w-[1400px] mx-auto flex flex-col items-center justify-center gap-4 sm:gap-4 md:gap-6">
|
|
<div className="w-full flex items-center justify-between gap-2">
|
|
<Link href="/" className="overflow-hidden">
|
|
<Image
|
|
src="/logo.svg"
|
|
alt="ZinTools Logo"
|
|
width={138}
|
|
height={38}
|
|
className="w-[120px] sm:w-[130px] md:w-[138px] h-auto"
|
|
/>
|
|
</Link>
|
|
|
|
<Searchbar className="hidden sm:flex" />
|
|
|
|
<div className="flex items-center justify-center gap-2">
|
|
<Button label="Login" variant="ghost" />
|
|
<Button label="Sign up" />
|
|
</div>
|
|
</div>
|
|
|
|
<Navbar className="hidden sm:block" />
|
|
|
|
<div className="w-full flex sm:hidden gap-x-2">
|
|
<Searchbar />
|
|
<MobileNav />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|