summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/core/components/elements/Navbar/Navbar.jsx171
-rw-r--r--src/core/components/elements/Navbar/Search.jsx74
2 files changed, 185 insertions, 60 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>
</>
)
}
diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx
index ff2c7adb..644e0c9f 100644
--- a/src/core/components/elements/Navbar/Search.jsx
+++ b/src/core/components/elements/Navbar/Search.jsx
@@ -3,6 +3,8 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
import { useCallback, useEffect, useRef, useState } from 'react'
import Link from '../Link/Link'
import { useRouter } from 'next/router'
+import MobileView from '../../views/MobileView'
+import DesktopView from '../../views/DesktopView'
const Search = () => {
const router = useRouter()
@@ -50,43 +52,45 @@ const Search = () => {
}
return (
- <form
- onSubmit={handleSubmit}
- className='flex relative'
- >
- <input
- type='text'
- ref={queryRef}
- className='form-input p-3 rounded-r-none border-r-0 focus:border-gray_r-6'
- placeholder='Ketik nama, part number, merk'
- value={query}
- onChange={(e) => setQuery(e.target.value)}
- onBlur={onInputBlur}
- onFocus={loadSuggestion}
- />
- <button
- type='submit'
- className='rounded-r border border-l-0 border-gray_r-6 px-2'
+ <>
+ <form
+ onSubmit={handleSubmit}
+ className='flex-1 flex relative'
>
- <MagnifyingGlassIcon className='w-6' />
- </button>
+ <input
+ type='text'
+ ref={queryRef}
+ className='form-input p-3 rounded-r-none border-r-0 focus:border-gray_r-6'
+ placeholder='Ketik nama, part number, merk'
+ value={query}
+ onChange={(e) => setQuery(e.target.value)}
+ onBlur={onInputBlur}
+ onFocus={loadSuggestion}
+ />
+ <button
+ type='submit'
+ className='rounded-r border border-l-0 border-gray_r-6 px-2'
+ >
+ <MagnifyingGlassIcon className='w-6' />
+ </button>
- {suggestions.length > 1 && (
- <>
- <div className='absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6'>
- {suggestions.map((suggestion, index) => (
- <Link
- href={`/shop/search?q=${suggestion.term}`}
- key={index}
- className='px-3 py-3 !text-gray_r-12 font-normal'
- >
- {suggestion.term}
- </Link>
- ))}
- </div>
- </>
- )}
- </form>
+ {suggestions.length > 1 && (
+ <>
+ <div className='absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6 z-50'>
+ {suggestions.map((suggestion, index) => (
+ <Link
+ href={`/shop/search?q=${suggestion.term}`}
+ key={index}
+ className='px-3 py-3 !text-gray_r-12 font-normal'
+ >
+ {suggestion.term}
+ </Link>
+ ))}
+ </div>
+ </>
+ )}
+ </form>
+ </>
)
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:55:38 +0000