summaryrefslogtreecommitdiff
path: root/src/core/components/elements/Navbar/TopBannerMobile.jsx
diff options
context:
space:
mode:
authorit-fixcomart <it@fixcomart.co.id>2025-07-29 09:46:05 +0700
committerit-fixcomart <it@fixcomart.co.id>2025-07-29 09:46:05 +0700
commit077467cf53b46d8049df8b812577cd1a03011eba (patch)
tree0dc641a9acb1237a3caca3f7f8a157a3e938c0b8 /src/core/components/elements/Navbar/TopBannerMobile.jsx
parent0d28dc8ff5fb8c5399e356ed6ecae4fce2019ca6 (diff)
parentdc31efb2fec4c7b79917324d922ae820c4b5bb50 (diff)
<hafid> merging new release
Diffstat (limited to 'src/core/components/elements/Navbar/TopBannerMobile.jsx')
-rw-r--r--src/core/components/elements/Navbar/TopBannerMobile.jsx72
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;