<hafid> add top banner mobile

2 files changed, 74 insertions, 2 deletions

diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index 47182a47..7c148440 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -11,7 +11,7 @@ import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import MobileView from '../../views/MobileView';
 import Link from '../Link/Link';
-import TopBanner from './TopBanner';
+import TopBannerMobile from './TopBannerMobile';
 import { useCartStore } from '~/modules/cart/stores/useCartStore';
 import useAuth from '@/core/hooks/useAuth';
 
@@ -53,7 +53,7 @@ const NavbarMobile = () => {
 
   return (
     <MobileView>
-      <TopBanner />
+      <TopBannerMobile />
       <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='/'>
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;