feat: implement banner component with carousel functionality and dynamic content

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>
   )