diff options
Diffstat (limited to 'src/core/components/elements/Navbar/Navbar.jsx')
| -rw-r--r-- | src/core/components/elements/Navbar/Navbar.jsx | 192 |
1 files changed, 4 insertions, 188 deletions
diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx index 1c559faf..57904498 100644 --- a/src/core/components/elements/Navbar/Navbar.jsx +++ b/src/core/components/elements/Navbar/Navbar.jsx @@ -1,197 +1,13 @@ import dynamic from 'next/dynamic' -import Image from 'next/image' -import IndoteknikLogo from '@/images/logo.png' -import { - Bars3Icon, - ChevronDownIcon, - 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' -const Search = dynamic(() => import('./Search')) +const NavbarDesktop = dynamic(() => import('./NavbarDesktop')) +const NavbarMobile = dynamic(() => import('./NavbarMobile')) const Navbar = () => { - const { Sidebar, open } = useSidebar() return ( <> - <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> - <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/60'> - <div className='container mx-auto flex justify-between'> - <Link - href='/' - className='!text-gray_r-12' - > - 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 border-b border-gray_r-6'> - <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 mt-6'> - <div className='flex bg-gray_r-2'> - <div className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-tl-xl flex items-center'> - <div>Kategori Produk</div> - <button - type='button' - className='ml-auto pl-3' - > - <ChevronDownIcon className='w-6' /> - </button> - </div> - <div className='w-6/12 flex gap-x-1 px-1 bg-gray_r-1'> - <Link - href='/' - className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition' - > - Promo Produk - </Link> - <Link - href='/' - className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition' - > - Semua Brand - </Link> - <Link - href='/' - className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition' - > - Ready Stock - </Link> - <Link - href='/' - className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition' - > - Blog Indoteknik - </Link> - </div> - <div className='w-3/12 flex gap-x-1'> - <Link - href='/login' - className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none' - > - Masuk - </Link> - <Link - href='/register' - className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none rounded-tr-xl' - > - Daftar - </Link> - </div> - </div> - </div> - </DesktopView> + <NavbarMobile /> + <NavbarDesktop /> </> ) } |