diff options
Diffstat (limited to 'src/core/components/elements/Navbar/Navbar.jsx')
| -rw-r--r-- | src/core/components/elements/Navbar/Navbar.jsx | 171 |
1 files changed, 146 insertions, 25 deletions
diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx index 8cecee5b..0198ea5e 100644 --- a/src/core/components/elements/Navbar/Navbar.jsx +++ b/src/core/components/elements/Navbar/Navbar.jsx @@ -1,9 +1,17 @@ import dynamic from 'next/dynamic' import Image from 'next/image' import IndoteknikLogo from '@/images/logo.png' -import { Bars3Icon, HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outline' +import { + Bars3Icon, + DocumentCheckIcon, + HeartIcon, + ShoppingCartIcon +} from '@heroicons/react/24/outline' import Link from '../Link/Link' import useSidebar from '@/core/hooks/useSidebar' +import MobileView from '../../views/MobileView' +import DesktopView from '../../views/DesktopView' +import DocumentTimeIcon from '@/icons/document_time.svg' const Search = dynamic(() => import('./Search')) @@ -11,34 +19,147 @@ const Navbar = () => { const { Sidebar, open } = useSidebar() return ( <> - <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'> - <div className='flex justify-between items-center mb-2'> - <Link href='/'> - <Image - src={IndoteknikLogo} - alt='Indoteknik Logo' - width={120} - height={40} - /> - </Link> - <div className='flex gap-x-3'> - <Link href='/my/wishlist'> - <HeartIcon className='w-6 text-gray_r-12' /> + <MobileView> + <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'> + <div className='flex justify-between items-center mb-2'> + <Link href='/'> + <Image + src={IndoteknikLogo} + alt='Indoteknik Logo' + width={120} + height={40} + /> </Link> - <Link href='/shop/cart'> - <ShoppingCartIcon className='w-6 text-gray_r-12' /> - </Link> - <button - type='button' - onClick={open} + <div className='flex gap-x-3'> + <Link href='/my/wishlist'> + <HeartIcon className='w-6 text-gray_r-12' /> + </Link> + <Link href='/shop/cart'> + <ShoppingCartIcon className='w-6 text-gray_r-12' /> + </Link> + <button + type='button' + onClick={open} + > + <Bars3Icon className='w-6 text-gray_r-12' /> + </button> + </div> + </div> + <Search /> + </nav> + {Sidebar} + </MobileView> + + <DesktopView> + <div className='py-3 bg-yellow_r-10'> + <div className='container mx-auto flex justify-between'> + <Link + href='/' + className='!text-gray_r-12' > - <Bars3Icon className='w-6 text-gray_r-12' /> - </button> + Tentang Indoteknik.com + </Link> + <div className='flex gap-x-6'> + <Link + href='/' + className='!text-gray_r-12' + > + Pembayaran Tempo + </Link> + <Link + href='/' + className='!text-gray_r-12' + > + F.A.Q + </Link> + <Link + href='/' + className='!text-gray_r-12' + > + Fitur Layanan + </Link> + </div> + </div> + </div> + + <nav className='py-6 sticky top-0 z-50 bg-white shadow'> + <div className='container mx-auto flex gap-x-6'> + <Link href='/'> + <Image + src={IndoteknikLogo} + alt='Indoteknik Logo' + width={180} + height={60} + /> + </Link> + <Search /> + <div className='flex gap-x-4'> + <Link + href='/my/transactions' + className='flex items-center gap-x-2 !text-gray_r-12/80' + > + <DocumentCheckIcon className='w-7' /> + Pending + <br /> + Quotation + </Link> + <Link + href='/shop/cart' + className='flex items-center gap-x-2 !text-gray_r-12/80' + > + <ShoppingCartIcon className='w-7' /> + Keranjang + <br /> + Belanja + </Link> + <Link + href='/my/wishlist' + className='flex items-center gap-x-2 !text-gray_r-12/80' + > + <HeartIcon className='w-7' /> + Wishlist + </Link> + <a + href='https://wa.me/628' + 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'>Order Via WA</div> + 0812 8080 622 (Chat) + </div> + </a> + </div> + </div> + </nav> + + <div className='container mx-auto my-6'> + <div className='flex bg-gray_r-4 rounded-t-xl'> + <div className="w-3/12 p-4 font-semibold"> + Kategori Produk + </div> + <div className='w-6/12 border-x border-gray_r-1 flex'> + <Link href='/' className='p-4 flex-1 text-center !text-gray_r-12/80'> + Promo Produk + </Link> + <Link href='/' className='p-4 flex-1 text-center !text-gray_r-12/80'> + Semua Brand + </Link> + <Link href='/' className='p-4 flex-1 text-center !text-gray_r-12/80'> + Ready Stock + </Link> + <Link href='/' className='p-4 flex-1 text-center !text-gray_r-12/80'> + Blog Indoteknik + </Link> + </div> </div> </div> - <Search /> - </nav> - {Sidebar} + </DesktopView> </> ) } |