diff options
Diffstat (limited to 'src/core/components/elements/Navbar')
4 files changed, 253 insertions, 120 deletions
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index d9f5658e..308f2623 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -1,85 +1,86 @@ +import { useProductContext } from '@/contexts/ProductContext'; +import useAuth from '@/core/hooks/useAuth'; +import { getCountCart } from '@/core/utils/cart'; +import { createSlug } from '@/core/utils/slug'; +import whatsappUrl from '@/core/utils/whatsappUrl'; +import IndoteknikLogo from '@/images/logo.png'; +import Cardheader from '@/lib/cart/components/Cartheader'; +import Category from '@/lib/category/components/Category'; import { ChevronDownIcon, + DocumentCheckIcon, HeartIcon, - ShoppingCartIcon, - DocumentCheckIcon -} from '@heroicons/react/24/outline' -import Link from '../Link/Link' -import Image from 'next/image' -import DesktopView from '../../views/DesktopView' -import dynamic from 'next/dynamic' -import IndoteknikLogo from '@/images/logo.png' -import Category from '@/lib/category/components/Category' -import { useCallback, useContext, useEffect, useState } from 'react' -import useAuth from '@/core/hooks/useAuth' -import NavbarUserDropdown from './NavbarUserDropdown' -import { getCartApi, getCountCart } from '@/core/utils/cart' -import whatsappUrl from '@/core/utils/whatsappUrl' -import { useRouter } from 'next/router' -import { getAuth, setAuth } from '@/core/utils/auth' -import { createSlug, getIdFromSlug } from '@/core/utils/slug' -import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton' -import { useProductContext } from '@/contexts/ProductContext' -import Cardheader from '@/lib/cart/components/Cartheader' - -const Search = dynamic(() => import('./Search')) -const TopBanner = dynamic(() => import('./TopBanner'), { - loading: () => <TopBannerSkeleton /> -}) +} from '@heroicons/react/24/outline'; +import dynamic from 'next/dynamic'; +import Image from 'next/image'; +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; +import DesktopView from '../../views/DesktopView'; +import Link from '../Link/Link'; +import NavbarUserDropdown from './NavbarUserDropdown'; +import NextImage from 'next/image'; + +const Search = dynamic(() => import('./Search'), { ssr: false }); +const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false }); const NavbarDesktop = () => { - const [isOpenCategory, setIsOpenCategory] = useState(false) - const auth = useAuth() + const [isOpenCategory, setIsOpenCategory] = useState(false); + const auth = useAuth(); - const [cartCount, setCartCount] = useState(0) + const [cartCount, setCartCount] = useState(0); - const [templateWA, setTemplateWA] = useState(null) - const [payloadWA, setPayloadWa] = useState(null) - const [urlPath, setUrlPath] = useState(null) + const [templateWA, setTemplateWA] = useState(null); + const [payloadWA, setPayloadWa] = useState(null); + const [urlPath, setUrlPath] = useState(null); - const router = useRouter() + const router = useRouter(); - const { product } = useProductContext() + const { product } = useProductContext(); useEffect(() => { if (router.pathname === '/shop/product/[slug]') { setPayloadWa({ name: product?.name, manufacture: product?.manufacture.name, - url: createSlug('/shop/product/', product?.name, product?.id, true) - }) - setTemplateWA('product') + url: createSlug('/shop/product/', product?.name, product?.id, true), + }); + setTemplateWA('product'); - setUrlPath(router.asPath) + setUrlPath(router.asPath); } - }, [product, router]) + }, [product, router]); useEffect(() => { const handleCartChange = () => { const cart = async () => { - const listCart = await getCountCart() - setCartCount(listCart) - } - cart() - } - handleCartChange() + const listCart = await getCountCart(); + setCartCount(listCart); + }; + cart(); + }; + handleCartChange(); - window.addEventListener('localStorageChange', handleCartChange) + window.addEventListener('localStorageChange', handleCartChange); return () => { - window.removeEventListener('localStorageChange', handleCartChange) - } - }, []) + window.removeEventListener('localStorageChange', handleCartChange); + }; + }, []); return ( <DesktopView> <TopBanner /> - <div className='py-3 bg-warning-400' id='desktop-nav-top'> + <div className='py-2 bg-warning-400' id='desktop-nav-top'> <div className='container mx-auto flex justify-between'> - <Link href='/tentang-kami' className='!text-gray_r-12'> - Tentang Indoteknik.com - </Link> + <div className='flex items-start gap-5'> + <div> + <SocialMedias /> + </div> + </div> <div className='flex gap-x-6'> + <Link href='/tentang-kami' className='!text-gray_r-12'> + Tentang Indoteknik.com + </Link> <Link href='/my/pembayaran-tempo' className='!text-gray_r-12'> Pembayaran Tempo </Link> @@ -93,7 +94,12 @@ const NavbarDesktop = () => { <nav className='pt-6 sticky top-0 z-50 bg-white border-b-2 border-danger-500'> <div className='container mx-auto flex gap-x-6'> <Link href='/'> - <Image src={IndoteknikLogo} alt='Indoteknik Logo' width={210} height={210 / 3} /> + <Image + src={IndoteknikLogo} + alt='Indoteknik Logo' + width={210} + height={210 / 3} + /> </Link> <div className='flex-1 flex items-center'> <Search /> @@ -128,10 +134,15 @@ const NavbarDesktop = () => { 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} /> + <Image + src='/images/socials/Whatsapp-2.png' + alt='Whatsapp' + width={48} + height={48} + /> <div> <div className='font-semibold'>Whatsapp</div> - 0812 8080 622 (Chat) + 0817 1718 1922 (Chat) </div> </a> </div> @@ -146,16 +157,24 @@ const NavbarDesktop = () => { className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-t-xl flex items-center relative' > <div>Kategori Produk</div> - <ChevronDownIcon className={`ml-auto w-6 ${isOpenCategory ? 'rotate-180' : ''}`} /> + <ChevronDownIcon + className={`ml-auto w-6 ${isOpenCategory ? 'rotate-180' : ''}`} + /> - <div className={`category-mega-box-wrapper ${isOpenCategory ? 'show' : ''}`}> + <div + className={`category-mega-box-wrapper ${ + isOpenCategory ? 'show' : '' + }`} + > <Category /> </div> </button> <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'> <Link href='/shop/brands' - className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition' + className={`${ + router.asPath === '/shop/brands' && 'bg-gray_r-3' + } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition`} target='_blank' rel='noreferrer' > @@ -163,7 +182,10 @@ const NavbarDesktop = () => { </Link> <Link href='/shop/search?orderBy=stock' - className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition' + className={`${ + router.asPath === '/shop/search?orderBy=stock' && + 'bg-gray_r-3' + } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition`} target='_blank' rel='noreferrer' > @@ -179,7 +201,9 @@ const NavbarDesktop = () => { </Link> <Link href='/video' - className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition' + className={`${ + router.asPath === '/video' && 'bg-gray_r-3' + } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition`} target='_blank' rel='noreferrer' > @@ -220,7 +244,95 @@ const NavbarDesktop = () => { </div> </nav> </DesktopView> - ) -} + ); +}; + +const SocialMedias = () => ( + <div> + {/* <div className={headerClassName + 'block md:hidden'}>Temukan Kami</div> */} + <div className='flex flex-wrap gap-3 items-start'> + <a + target='_blank' + rel='noreferrer' + href='https://www.youtube.com/@indoteknikcom' + > + <NextImage + src='/images/socials/youtube.webp' + alt='Youtube - Indoteknik.com' + width={24} + height={24} + /> + </a> + <a + target='_blank' + rel='noreferrer' + href='https://www.tiktok.com/@indoteknikcom' + > + <NextImage + src='/images/socials/tiktok.png' + alt='TikTok - Indoteknik.com' + width={24} + height={24} + /> + </a> + {/* <a target='_blank' rel='noreferrer' href={whatsappUrl(null)}> + <NextImage + src='/images/socials/Whatsapp.png' + alt='Whatsapp - Indoteknik.com' + width={24} + height={24} + /> + </a> */} + <a + target='_blank' + rel='noreferrer' + href='https://www.facebook.com/indoteknikcom' + > + <NextImage + src='/images/socials/Facebook.png' + alt='Facebook - Indoteknik.com' + width={24} + height={24} + /> + </a> + <a + target='_blank' + rel='noreferrer' + href='https://www.instagram.com/indoteknikcom/' + > + <NextImage + src='/images/socials/Instagram.png' + alt='Instagram - Indoteknik.com' + width={24} + height={24} + /> + </a> + <a + target='_blank' + rel='noreferrer' + href='https://www.linkedin.com/company/pt-indoteknik-dotcom-gemilang/' + > + <NextImage + src='/images/socials/Linkedin.png' + alt='Linkedin - Indoteknik.com' + width={24} + height={24} + /> + </a> + <a + target='_blank' + rel='noreferrer' + href='https://goo.gl/maps/GF8EmDjpQTHZPsJ1A' + > + <NextImage + src='/images/socials/g_maps.png' + alt='Maps - Indoteknik.com' + width={24} + height={24} + /> + </a> + </div> + </div> +); -export default NavbarDesktop +export default NavbarDesktop; diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx index 704e91b6..bcf45e0a 100644 --- a/src/core/components/elements/Navbar/NavbarMobile.jsx +++ b/src/core/components/elements/Navbar/NavbarMobile.jsx @@ -1,51 +1,60 @@ -import Image from 'next/image' -import MobileView from '../../views/MobileView' -import Link from '../Link/Link' -import { Bars3Icon, HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outline' -import useSidebar from '@/core/hooks/useSidebar' -import dynamic from 'next/dynamic' -import IndoteknikLogo from '@/images/logo.png' -import { useEffect, useState } from 'react' -import { getCart, getCountCart } from '@/core/utils/cart' -import TopBanner from './TopBanner' +import useSidebar from '@/core/hooks/useSidebar'; +import { getCountCart } from '@/core/utils/cart'; +import IndoteknikLogo from '@/images/logo.png'; +import { + Bars3Icon, + HeartIcon, + ShoppingCartIcon, +} from '@heroicons/react/24/outline'; +import dynamic from 'next/dynamic'; +import Image from 'next/image'; +import { useEffect, useState } from 'react'; +import MobileView from '../../views/MobileView'; +import Link from '../Link/Link'; +// import TopBanner from './TopBanner'; -const Search = dynamic(() => import('./Search')) +const Search = dynamic(() => import('./Search')); const NavbarMobile = () => { - const { Sidebar, open } = useSidebar() + const { Sidebar, open } = useSidebar(); - const [cartCount, setCartCount] = useState(0) + const [cartCount, setCartCount] = useState(0); useEffect(() => { const handleCartChange = () => { const cart = async () => { - const listCart = await getCountCart() - setCartCount(listCart) - } - cart() - } - handleCartChange() + const listCart = await getCountCart(); + setCartCount(listCart); + }; + cart(); + }; + handleCartChange(); - window.addEventListener('localStorageChange', handleCartChange) + window.addEventListener('localStorageChange', handleCartChange); return () => { - window.removeEventListener('localStorageChange', handleCartChange) - } - }, []) + window.removeEventListener('localStorageChange', handleCartChange); + }; + }, []); return ( <MobileView> - <TopBanner /> + {/* <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='/'> - <Image src={IndoteknikLogo} alt='Indoteknik Logo' width={120} height={40} /> + <Image + src={IndoteknikLogo} + alt='Indoteknik Logo' + width={120} + height={40} + /> </Link> <div className='flex gap-x-3'> - <Link href='/my/wishlist'> + <Link href='/my/wishlist' aria-label='Wishlist'> <HeartIcon className='w-6 text-gray_r-12' /> </Link> - <Link href='/shop/cart' className='relative'> + <Link href='/shop/cart' className='relative' aria-label='Cart'> <ShoppingCartIcon className='w-6 text-gray_r-12' /> {cartCount > 0 && ( <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'> @@ -62,7 +71,7 @@ const NavbarMobile = () => { </nav> {Sidebar} </MobileView> - ) -} + ); +}; -export default NavbarMobile +export default NavbarMobile; diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx index 1851ce84..42bdc12a 100644 --- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx +++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx @@ -2,9 +2,11 @@ import { deleteAuth } from '@/core/utils/auth' import Link from '../Link/Link' import { useRouter } from 'next/router' import { signOut, useSession } from 'next-auth/react' +import useAuth from '@/core/hooks/useAuth' const NavbarUserDropdown = () => { const router = useRouter() + const atuh = useAuth() const logout = async () => { deleteAuth().then(() => { @@ -21,6 +23,9 @@ const NavbarUserDropdown = () => { <Link href='/my/invoices'>Invoice & Faktur Pajak</Link> <Link href='/my/wishlist'>Wishlist</Link> <Link href='/my/address'>Daftar Alamat</Link> + {!atuh?.external && + <Link href='/my/recomendation'>Dashboard Recomendation</Link> + } <button type='button' onClick={logout}> Keluar Akun </button> diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx index a757c260..722a7501 100644 --- a/src/core/components/elements/Navbar/TopBanner.jsx +++ b/src/core/components/elements/Navbar/TopBanner.jsx @@ -1,33 +1,40 @@ -import odooApi from '@/core/api/odooApi' -import { useQuery } from 'react-query' -import Image from 'next/image' -import Link from '../Link/Link' -import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton' +import Image from 'next/image'; +import { useQuery } from 'react-query'; + +import odooApi from '@/core/api/odooApi'; +import SmoothRender from '~/components/ui/smooth-render'; +import Link from '../Link/Link'; const TopBanner = () => { - const fetchTopBanner = async () => await odooApi('GET', '/api/v1/banner?type=top-banner') - const topBanner = useQuery('topBanner', fetchTopBanner, { refetchOnWindowFocus: false }) + const topBanner = useQuery({ + queryKey: 'topBanner', + queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'), + refetchOnWindowFocus: false, + }); - if (topBanner.isLoading) { - return <TopBannerSkeleton /> - } + const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent'; + const hasData = topBanner.data?.length > 0; + const data = topBanner.data?.[0] || null; return ( - topBanner.isFetched && - topBanner.data?.length > 0 && ( - <div style={{ backgroundColor: topBanner.data[0]?.backgroundColor || 'transparent' }}> - <Link href={topBanner.data[0]?.url}> - <Image - src={topBanner.data[0].image} - alt={topBanner.data[0].name} - width={1440} - height={40} - className='object-cover object-center h-full mx-auto' - /> - </Link> - </div> - ) - ) -} + <SmoothRender + isLoaded={hasData} + height='36px' + duration='700ms' + delay='300ms' + style={{ backgroundColor }} + > + <Link href={data?.url}> + <Image + src={data?.image} + alt={data?.name} + width={1440} + height={40} + className='object-cover object-center h-full mx-auto' + /> + </Link> + </SmoothRender> + ); +}; -export default TopBanner +export default TopBanner; |