diff options
Diffstat (limited to 'src/core/components/elements/Navbar')
| -rw-r--r-- | src/core/components/elements/Navbar/NavbarDesktop.jsx | 129 | ||||
| -rw-r--r-- | src/core/components/elements/Navbar/TopBanner.jsx | 61 |
2 files changed, 150 insertions, 40 deletions
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index 760e627d..8cb4239c 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -18,13 +18,10 @@ import { useEffect, useState } from 'react'; import DesktopView from '../../views/DesktopView'; import Link from '../Link/Link'; import NavbarUserDropdown from './NavbarUserDropdown'; -import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton'; +import NextImage from 'next/image'; const Search = dynamic(() => import('./Search'), { ssr: false }); -const TopBanner = dynamic(() => import('./TopBanner'), { - ssr: false, - loading: () => <TopBannerSkeleton />, -}); +const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false }); const NavbarDesktop = () => { const [isOpenCategory, setIsOpenCategory] = useState(false); @@ -73,12 +70,17 @@ const NavbarDesktop = () => { 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> @@ -140,7 +142,7 @@ const NavbarDesktop = () => { /> <div> <div className='font-semibold'>Whatsapp</div> - 0812 8080 622 (Chat) + 0817 1718 1922 (Chat) </div> </a> </div> @@ -178,7 +180,9 @@ const NavbarDesktop = () => { </Link> <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' > @@ -186,7 +190,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' > @@ -198,7 +205,15 @@ const NavbarDesktop = () => { target='_blank' rel='noreferrer noopener' > - Blog + Blog Indoteknik + </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' + target='_blank' + rel='noreferrer' + > + Indoteknik TV </Link> </div> @@ -238,4 +253,92 @@ const NavbarDesktop = () => { ); }; +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; 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; |