diff options
Diffstat (limited to 'src/core/components/elements/Navbar')
5 files changed, 42 insertions, 10 deletions
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index 837d436c..3da0035a 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -14,6 +14,8 @@ import { useEffect, useState } from 'react' import useAuth from '@/core/hooks/useAuth' import NavbarUserDropdown from './NavbarUserDropdown' import { getCart } from '@/core/utils/cart' +import TopBanner from './TopBanner' +import whatsappUrl from '@/core/utils/whatsappUrl' const Search = dynamic(() => import('./Search')) @@ -38,19 +40,17 @@ const NavbarDesktop = () => { return ( <DesktopView> + <TopBanner /> <div className='py-3 bg-warning-400' id='desktop-nav-top'> <div className='container mx-auto flex justify-between'> - <Link href='/' className='!text-gray_r-12'> + <Link href='/tentang-kami' className='!text-gray_r-12'> Tentang Indoteknik.com </Link> <div className='flex gap-x-6'> - <Link href='/' className='!text-gray_r-12'> + <Link href='/my/pembayaran-tempo' 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> @@ -90,7 +90,7 @@ const NavbarDesktop = () => { Wishlist </Link> <a - href='https://wa.me/628128080622' + href={whatsappUrl()} target='_blank' rel='noreferrer' className='flex items-center gap-x-1 !text-gray_r-12/80' diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx index 0502dba5..7ac967fa 100644 --- a/src/core/components/elements/Navbar/NavbarMobile.jsx +++ b/src/core/components/elements/Navbar/NavbarMobile.jsx @@ -7,6 +7,7 @@ import dynamic from 'next/dynamic' import IndoteknikLogo from '@/images/logo.png' import { useEffect, useState } from 'react' import { getCart } from '@/core/utils/cart' +import TopBanner from './TopBanner' const Search = dynamic(() => import('./Search')) @@ -30,6 +31,7 @@ const NavbarMobile = () => { return ( <MobileView> + <TopBanner /> <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='/'> @@ -45,7 +47,7 @@ const NavbarMobile = () => { {cartCount} </span> </Link> - <button type='button' onClick={open}> + <button type='button' aria-label='sidebarMenuButton' onClick={open}> <Bars3Icon className='w-6 text-gray_r-12' /> </button> </div> diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx index 1d2429a7..7848124c 100644 --- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx +++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx @@ -13,6 +13,7 @@ const NavbarUserDropdown = () => { return ( <div className='navbar-user-dropdown-wrapper'> <div className='navbar-user-dropdown'> + <Link href='/my/quotations'>Daftar Quotation</Link> <Link href='/my/transactions'>Daftar Transaksi</Link> <Link href='/my/invoices'>Invoice & Faktur Pajak</Link> <Link href='/my/wishlist'>Wishlist</Link> diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx index 3046782b..47a9c235 100644 --- a/src/core/components/elements/Navbar/Search.jsx +++ b/src/core/components/elements/Navbar/Search.jsx @@ -13,7 +13,7 @@ const Search = () => { const loadSuggestion = useCallback(() => { if (query && document.activeElement == queryRef.current) { searchSuggestApi({ query }).then((response) => { - setSuggestions(response.data.suggestions) + setSuggestions(response.data?.suggestions || []) }) } else { setSuggestions([]) @@ -56,11 +56,15 @@ const Search = () => { onBlur={onInputBlur} onFocus={loadSuggestion} /> - <button type='submit' className='rounded-r border border-l-0 border-gray_r-6 px-2'> + <button + type='submit' + aria-label='SearchButton' + className='rounded-r border border-l-0 border-gray_r-6 px-2' + > <MagnifyingGlassIcon className='w-6' /> </button> - {suggestions.length > 1 && ( + {suggestions.length > 0 && ( <> <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) => ( diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx new file mode 100644 index 00000000..48b23a3d --- /dev/null +++ b/src/core/components/elements/Navbar/TopBanner.jsx @@ -0,0 +1,25 @@ +import odooApi from '@/core/api/odooApi' +import { useQuery } from 'react-query' +import Image from 'next/image' + +const TopBanner = () => { + const fetchTopBanner = async () => await odooApi('GET', '/api/v1/banner?type=top-banner') + const topBanner = useQuery('topBanner', fetchTopBanner) + + return ( + topBanner.isFetched && + topBanner.data?.length > 0 && ( + <div style={{ backgroundColor: topBanner.data[0]?.backgroundColor || 'transparent' }}> + <Image + src={topBanner.data[0].image} + alt={topBanner.data[0].name} + width={1440} + height={40} + className='object-cover object-center h-full mx-auto' + /> + </div> + ) + ) +} + +export default TopBanner |