From 0d3c0cf6a00ef81bfdb944490e48f16af41fc029 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 13 Nov 2024 10:08:16 +0700
Subject: <iman> add radis

---
 src/core/components/elements/Navbar/TopBanner.jsx | 53 ++++++++++++++---------
 1 file changed, 33 insertions(+), 20 deletions(-)

(limited to 'src/core/components/elements/Navbar/TopBanner.jsx')

diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index f438ae67..709495ce 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,22 +1,37 @@
 import Image from 'next/image';
-import { useQuery } from 'react-query';import useDevice from '@/core/hooks/useDevice'
+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 } from 'react';
+import { useEffect, useState } from 'react';
 
 const TopBanner = ({ onLoad = () => {} }) => {
-  const { isDesktop, isMobile } = useDevice()
-  const topBanner = useQuery({
-    queryKey: 'topBanner',
-    queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'),
-    refetchOnWindowFocus: false,
-  });
+  const [topBanner, setTopBanner] = useState([]);
+  const { isDesktop, isMobile } = useDevice();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const res = await fetch(`/api/hero-banner?type=top-banner`);
+      const { data } = await res.json();
+      if (data) {
+        setTopBanner(data);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  // const topBanner = useQuery({
+  //   queryKey: 'topBanner',
+  //   queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'),
+  //   refetchOnWindowFocus: false,
+  // });
 
   // const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
-  const hasData = topBanner.data?.length > 0;
-  const data = topBanner.data?.[0] || null;
+  const hasData = topBanner?.length > 0;
+  const data = topBanner?.[0] || null;
 
   useEffect(() => {
     if (hasData) {
@@ -31,17 +46,15 @@ const TopBanner = ({ onLoad = () => {} }) => {
       duration='700ms'
       delay='300ms'
       className='h-auto'
-      >
+    >
       <Link
-          href={data?.url}
-          className="block bg-cover bg-center h-3 md:h-6 lg:h-[36px]"
-          style={{
-            backgroundImage: `url('${data?.image}')`,
-          }}
-        >
-        </Link>
-
-      </SmoothRender>
+        href={data?.url}
+        className='block bg-cover bg-center h-3 md:h-6 lg:h-[36px]'
+        style={{
+          backgroundImage: `url('${data?.image}')`,
+        }}
+      ></Link>
+    </SmoothRender>
   );
 };
 
-- 
cgit v1.2.3

