From b42aa6c960d7adfc435a7386ae0d983df1b5739c Mon Sep 17 00:00:00 2001
From: "fredy.siswanto" <fredy.siswanto@komunal.co.id>
Date: Mon, 3 Mar 2025 13:42:01 +0700
Subject: [PATCH] feat: implement banner component with carousel functionality
 and dynamic content

---
 app/components/ui/banner.tsx | 39 ++++++++++++++++++++++++++----------
 app/data/contents.ts         | 23 +++++++++++++++++++++
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/app/components/ui/banner.tsx b/app/components/ui/banner.tsx
index 781730d..354f5e7 100644
--- a/app/components/ui/banner.tsx
+++ b/app/components/ui/banner.tsx
@@ -1,21 +1,38 @@
+import useEmblaCarousel from 'embla-carousel-react'
 import { Link } from 'react-router'
 
-import { APP } from '~/configs/meta'
+import { BANNER } from '~/data/contents'
 
 export const Banner = () => {
+  const [emblaReference] = useEmblaCarousel({ loop: false })
+
   return (
-    <div className="min-h-[65px]">
+    <div className="">
       <div className="relative">
-        <Link
-          to="/#"
-          className="mt-2 h-full py-2"
+        <div
+          className="embla overflow-hidden"
+          ref={emblaReference}
         >
-          <img
-            src={'/images/banner.png'}
-            alt={APP.title}
-            className="h-[70px] w-[100%] content-center sm:h-full"
-          />
-        </Link>
+          <div className="embla__container flex">
+            {BANNER.map(({ urlImage, alt, link }, index) => (
+              <div
+                key={index}
+                className="embla__slide max-h-[100px] min-h-[65px] w-full min-w-0 flex-none"
+              >
+                <Link
+                  to={link}
+                  className="mt-2 h-full py-2"
+                >
+                  <img
+                    src={urlImage}
+                    alt={alt}
+                    className="h-[70px] w-[100%] content-center sm:h-full"
+                  />
+                </Link>
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
     </div>
   )
diff --git a/app/data/contents.ts b/app/data/contents.ts
index b849bfa..9e45504 100644
--- a/app/data/contents.ts
+++ b/app/data/contents.ts
@@ -1,4 +1,9 @@
 import type { TNews } from '~/types/news'
+type TBanner = {
+  urlImage: string
+  alt: string
+  link: string
+}
 
 export const DUMMY_DESCRIPTION = 'Berita Terhangat hari ini'
 
@@ -147,3 +152,21 @@ export const KAJIAN: TNews = {
     },
   ],
 }
+
+export const BANNER: TBanner[] = [
+  {
+    urlImage: '/images/banner.png',
+    alt: 'banner',
+    link: '/category/spotlight',
+  },
+  {
+    urlImage: 'https://placehold.co/1000x65.png',
+    alt: 'banner',
+    link: '/#',
+  },
+  {
+    urlImage: '/images/banner.png',
+    alt: 'banner',
+    link: '/#',
+  },
+]