diff options
| author | it-fixcomart <it@fixcomart.co.id> | 2025-07-29 09:46:05 +0700 |
|---|---|---|
| committer | it-fixcomart <it@fixcomart.co.id> | 2025-07-29 09:46:05 +0700 |
| commit | 077467cf53b46d8049df8b812577cd1a03011eba (patch) | |
| tree | 0dc641a9acb1237a3caca3f7f8a157a3e938c0b8 /src/core/components/elements/Navbar/TopBannerMobile.jsx | |
| parent | 0d28dc8ff5fb8c5399e356ed6ecae4fce2019ca6 (diff) | |
| parent | dc31efb2fec4c7b79917324d922ae820c4b5bb50 (diff) | |
<hafid> merging new release
Diffstat (limited to 'src/core/components/elements/Navbar/TopBannerMobile.jsx')
| -rw-r--r-- | src/core/components/elements/Navbar/TopBannerMobile.jsx | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/src/core/components/elements/Navbar/TopBannerMobile.jsx b/src/core/components/elements/Navbar/TopBannerMobile.jsx new file mode 100644 index 00000000..c3f42f85 --- /dev/null +++ b/src/core/components/elements/Navbar/TopBannerMobile.jsx @@ -0,0 +1,72 @@ +import Image from 'next/image'; +import { useQuery } from 'react-query'; +import useDevice from '@/core/hooks/useDevice'; +import odooApi from '@/core/api/odooApi'; +import SmoothRender from '~/components/ui/smooth-render'; +import Link from '../Link/Link'; +import { background } from '@chakra-ui/react'; +import { useEffect, useState } from 'react'; + +const TopBannerMobile = ({ onLoad = () => {} }) => { + const [topBannerMobile, setTopBannerMobile] = useState([]); + const { isDesktop, isMobile } = useDevice(); + + useEffect(() => { + const fetchData = async () => { + const res = await fetch(`/api/hero-banner?type=top-banner-mobile`); + const { data } = await res.json(); + if (data) { + setTopBannerMobile(data); + } + }; + + fetchData(); + }, []); + + // const topBannerMobile = useQuery({ + // queryKey: 'topBannerMobile', + // queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'), + // refetchOnWindowFocus: false, + // }); + + // const backgroundColor = topBannerMobile.data?.[0]?.backgroundColor || 'transparent'; + const hasData = topBannerMobile?.length > 0; + const data = topBannerMobile?.[0] || null; + + useEffect(() => { + if (hasData) { + onLoad(); + } + }, [hasData, onLoad]); + + + if (!hasData || !data?.image) { + return null; + } + return ( + <SmoothRender + isLoaded={hasData} + duration='700ms' + delay='300ms' + className='h-auto' + > + <Link + href={data?.url} + aria-label='panduan pick up barang' + className='block w-full' + > + <Image + src={data?.image} + alt='Panduan Pick Up Barang' + width={0} + height={0} + sizes='100vw' + className='w-full h-auto' + priority + /> + </Link> + </SmoothRender> + ); +}; + +export default TopBannerMobile; |
