feat: implement banner component with carousel functionality and dynamic content

app/components/ui/banner.tsx

@@ -1,22 +1,39 @@
+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">
+        <div
+          className="embla overflow-hidden"
+          ref={emblaReference}
+        >
+          <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="/#"
+                  to={link}
                   className="mt-2 h-full py-2"
                 >
                   <img
-            src={'/images/banner.png'}
+                    src={urlImage}
-            alt={APP.title}
+                    alt={alt}
                     className="h-[70px] w-[100%] content-center sm:h-full"
                   />
                 </Link>
               </div>
+            ))}
+          </div>
+        </div>
+      </div>
     </div>
   )
 }

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: '/#',
+  },
+]