diff options
Diffstat (limited to 'src-migrate/modules/header/components/HeaderDesktop.tsx')
| -rw-r--r-- | src-migrate/modules/header/components/HeaderDesktop.tsx | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/src-migrate/modules/header/components/HeaderDesktop.tsx b/src-migrate/modules/header/components/HeaderDesktop.tsx new file mode 100644 index 00000000..3860bded --- /dev/null +++ b/src-migrate/modules/header/components/HeaderDesktop.tsx @@ -0,0 +1,82 @@ +import Logo from "~/images/logo.png"; +import { DocumentCheckIcon, HeartIcon } from "@heroicons/react/24/outline"; + +import Image from 'next/image' +import Link from 'next/link' + +// Components +import SearchBar from "./SearchBar"; + +// Constants +import { SECONDARY_MENU_ITEMS } from "~/common/constants/menu"; + +const LOGO_WIDTH = 210; +const LOGO_HEIGHT = LOGO_WIDTH / 3; + +const HeaderDesktop = () => { + return ( + <header> + <nav className="pt-6 sticky top-0 z-50 bg-white border-b-2 border-danger-500"> + <div className="container flex items-center gap-x-6"> + <Link href='/'> + <Image src={Logo} alt="Logo Indoteknik.com" width={LOGO_WIDTH} height={LOGO_HEIGHT} /> + </Link> + + <SearchBar /> + + <div className="flex gap-x-4 items-center"> + <Link + target='_blank' + rel='noreferrer' + href='/my/transactions' + className='flex items-center gap-x-2 !text-gray-900' + > + <DocumentCheckIcon className='w-7' /> + Daftar<br />Quotation + </Link> + + <Link + target='_blank' + rel='noreferrer' + href='/my/wishlist' + className='flex items-center gap-x-2 !text-gray-900' + > + <HeartIcon className='w-7' /> + Wishlist + </Link> + + <a + href={''} + target='_blank' + rel='noreferrer' + className='flex items-center gap-x-1 !text-gray_r-12/80' + > + <Image src='/images/socials/Whatsapp-2.png' alt='Whatsapp' width={48} height={48} /> + <div> + <div className='font-semibold'>Whatsapp</div> + 0812 8080 622 (Chat) + </div> + </a> + </div> + </div> + + <div className="container mt-6 flex"> + <button type="button" className="w-3/12 p-4 font-semibold border border-gray_r-6 rounded-t-xl flex items-center relative"> + Kategori + </button> + + <nav className="w-6/12 flex px-1 divide-x divide-gray-200"> + {SECONDARY_MENU_ITEMS.map((item, index) => ( + <Link key={index} href={item.href} target="_blank" rel="noreferrer" className="font-medium text-center p-4 flex-1 !text-gray-800 hover:bg-gray-100 transition-all"> + {item.label} + </Link> + ))} + </nav> + + </div> + </nav> + </header> + ) +} + +export default HeaderDesktop
\ No newline at end of file |
