Merge commit 'b42aa6c960d7adfc435a7386ae0d983df1b5739c'

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
+        <div
-          to="/#"
+          className="embla overflow-hidden"
-          className="mt-2 h-full py-2"
+          ref={emblaReference}
         >
-          <img
+          <div className="embla__container flex">
-            src={'/images/banner.png'}
+            {BANNER.map(({ urlImage, alt, link }, index) => (
-            alt={APP.title}
+              <div
-            className="h-[70px] w-[100%] content-center sm:h-full"
+                key={index}
-          />
+                className="embla__slide max-h-[100px] min-h-[65px] w-full min-w-0 flex-none"
-        </Link>
+              >
+                <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>
   )

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