diff options
Diffstat (limited to 'src/core')
3 files changed, 119 insertions, 98 deletions
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index d9f5658e..9bcd4df2 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -2,74 +2,72 @@ import { ChevronDownIcon, 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 /> -}) + 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'), { 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> @@ -93,7 +91,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,7 +131,12 @@ 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) @@ -146,9 +154,15 @@ 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' : ''}`} /> - - <div className={`category-mega-box-wrapper ${isOpenCategory ? 'show' : ''}`}> + <ChevronDownIcon + className={`ml-auto w-6 ${isOpenCategory ? 'rotate-180' : ''}`} + /> + + <div + className={`category-mega-box-wrapper ${ + isOpenCategory ? 'show' : '' + }`} + > <Category /> </div> </button> @@ -220,7 +234,7 @@ const NavbarDesktop = () => { </div> </nav> </DesktopView> - ) -} + ); +}; -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..92bd5627 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 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'; -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/Skeleton/TopBannerSkeleton.jsx b/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx index f7d2e748..8d1a51d2 100644 --- a/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx +++ b/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx @@ -1,19 +1,17 @@ -import useDevice from '@/core/hooks/useDevice' -import classNames from 'classnames' -import Skeleton from 'react-loading-skeleton' +import useDevice from '@/core/hooks/useDevice'; +import classNames from 'classnames'; +import { Skeleton } from '@chakra-ui/react'; const TopBannerSkeleton = () => { - const { isDesktop, isMobile } = useDevice() + const { isDesktop, isMobile } = useDevice(); const deviceClassName = { - 'h-10': isDesktop, - 'h-2.5': isMobile - } - const combinedClassName = classNames(deviceClassName) + '!h-[36px]': isDesktop, + 'h-2.5': isMobile, + }; + const combinedClassName = classNames(deviceClassName); - return ( - <Skeleton className={combinedClassName} count={1} containerClassName='w-full h-full block' /> - ) -} + return <Skeleton className={combinedClassName} />; +}; -export { TopBannerSkeleton } +export { TopBannerSkeleton }; |