Fix banner url

3 files changed, 22 insertions, 14 deletions

diff --git a/src/core/components/elements/Link/Link.jsx b/src/core/components/elements/Link/Link.jsx
index f6b39d45..716ce325 100644
--- a/src/core/components/elements/Link/Link.jsx
+++ b/src/core/components/elements/Link/Link.jsx
@@ -9,6 +9,8 @@ import NextLink from 'next/link'
  * @returns {JSX.Element} - Rendered `Link` component.
  */
 const Link = ({ children, ...props }) => {
+  if (!props?.href || props?.href == false) return children
+
   return (
     <NextLink
       {...props}
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index 48b23a3d..9efd0a8d 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,6 +1,7 @@
 import odooApi from '@/core/api/odooApi'
 import { useQuery } from 'react-query'
 import Image from 'next/image'
+import Link from '../Link/Link'
 
 const TopBanner = () => {
   const fetchTopBanner = async () => await odooApi('GET', '/api/v1/banner?type=top-banner')
@@ -10,13 +11,15 @@ const TopBanner = () => {
     topBanner.isFetched &&
     topBanner.data?.length > 0 && (
       <div style={{ backgroundColor: topBanner.data[0]?.backgroundColor || 'transparent' }}>
-        <Image
-          src={topBanner.data[0].image}
-          alt={topBanner.data[0].name}
-          width={1440}
-          height={40}
-          className='object-cover object-center h-full mx-auto'
-        />
+        <Link href={topBanner.data[0]?.url}>
+          <Image
+            src={topBanner.data[0].image}
+            alt={topBanner.data[0].name}
+            width={1440}
+            height={40}
+            className='object-cover object-center h-full mx-auto'
+          />
+        </Link>
       </div>
     )
   )
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 31c6b240..5d2a3afb 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -9,6 +9,7 @@ import { useQuery } from 'react-query'
 import odooApi from '@/core/api/odooApi'
 import Image from 'next/image'
 import DelayRender from '@/core/components/elements/DelayRender/DelayRender'
+import Link from '@/core/components/elements/Link/Link'
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
 const FlashSale = dynamic(() => import('@/lib/flashSale/components/FlashSale'))
@@ -57,13 +58,15 @@ export default function Home() {
           <div className='flex h-[360px]' ref={wrapperRef} onLoad={handleOnLoad}>
             <div className='w-2/12'>
               {secondHeroBanner.isFetched && (
-                <Image
-                  src={secondHeroBanner.data[0].image}
-                  width={512}
-                  height={1024}
-                  alt={secondHeroBanner.data[0].name}
-                  className='object-cover object-center h-full'
-                />
+                <Link href={secondHeroBanner.data[0].url}>
+                  <Image
+                    src={secondHeroBanner.data[0].image}
+                    width={512}
+                    height={1024}
+                    alt={secondHeroBanner.data[0].name}
+                    className='object-cover object-center h-full'
+                  />
+                </Link>
               )}
             </div>
             <div className='w-7/12 px-1' ref={bannerRef}>