feat: integrate ads data into news banner and update loader to fetch ads

app/layouts/news/banner.tsx

@@ -1,10 +1,12 @@
 import Autoplay from 'embla-carousel-autoplay'
 import useEmblaCarousel from 'embla-carousel-react'
-import { Link } from 'react-router'
+import { Link, useRouteLoaderData } from 'react-router'
 
-import { BANNER } from '~/data/contents'
+import type { loader } from '~/routes/_news'
 
 export const Banner = () => {
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
+  const { adsData } = loaderData || {}
   const [emblaReference] = useEmblaCarousel({ loop: true }, [Autoplay()])
 
   return (
@@ -15,7 +17,7 @@ export const Banner = () => {
           ref={emblaReference}
         >
           <div className="embla__container flex">
-            {BANNER.map(({ urlImage, alt, link }, index) => (
+            {adsData?.map(({ image_url: urlImage, url: link, id }, index) => (
               <div
                 key={index}
                 className="embla__slide max-h-[100px] min-h-[65px] w-full min-w-0 flex-none"
@@ -23,11 +25,13 @@ export const Banner = () => {
                 <Link
                   to={link}
                   className="mt-2 h-full py-2"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   <img
                     src={urlImage}
-                    alt={alt}
-                    className="h-[70px] w-[100%] content-center sm:h-full"
+                    alt={id}
+                    className="h-[70px] w-[100%] object-contain object-center sm:h-full"
                   />
                 </Link>
               </div>