3 files changed, 29 insertions, 0 deletions
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 1ced4af4..ae4e09dd 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -14,6 +14,7 @@ import { useEffect, useState } from 'react'
 import useAuth from '@/core/hooks/useAuth'
 import NavbarUserDropdown from './NavbarUserDropdown'
 import { getCart } from '@/core/utils/cart'
+import TopBanner from './TopBanner'
 
 const Search = dynamic(() => import('./Search'))
 
@@ -38,6 +39,7 @@ const NavbarDesktop = () => {
 
   return (
     <DesktopView>
+      <TopBanner />
       <div className='py-3 bg-warning-400' id='desktop-nav-top'>
         <div className='container mx-auto flex justify-between'>
           <Link href='/' className='!text-gray_r-12'>
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index 0502dba5..072ed572 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -7,6 +7,7 @@ import dynamic from 'next/dynamic'
 import IndoteknikLogo from '@/images/logo.png'
 import { useEffect, useState } from 'react'
 import { getCart } from '@/core/utils/cart'
+import TopBanner from './TopBanner'
 
 const Search = dynamic(() => import('./Search'))
 
@@ -30,6 +31,7 @@ const NavbarMobile = () => {
 
   return (
     <MobileView>
+      <TopBanner/>
       <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/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
new file mode 100644
index 00000000..69c2ab05
--- /dev/null
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -0,0 +1,25 @@
+import odooApi from '@/core/api/odooApi'
+import { useQuery } from 'react-query'
+import Image from 'next/image'
+
+const TopBanner = () => {
+  const fetchTopBanner = async () => await odooApi('GET', '/api/v1/banner?type=top-banner')
+  const topBanner = useQuery('topBanner', fetchTopBanner)
+
+  return (
+    topBanner.isFetched &&
+    topBanner.data?.length > 0 && (
+      <div>
+        <Image
+          src={topBanner.data[0].image}
+          alt={topBanner.data[0].name}
+          width={1440}
+          height={40}
+          className='object-cover object-center h-full mx-auto'
+        />
+      </div>
+    )
+  )
+}
+
+export default TopBanner