feat: implement logging for ad interactions with new API and update banner component

app/layouts/news/banner.tsx

@@ -1,6 +1,7 @@
+import { Button } from '@headlessui/react'
 import Autoplay from 'embla-carousel-autoplay'
 import useEmblaCarousel from 'embla-carousel-react'
-import { Link, useRouteLoaderData } from 'react-router'
+import { useFetcher, useRouteLoaderData } from 'react-router'
 
 import type { loader } from '~/routes/_news'
 
@@ -8,6 +9,7 @@ export const Banner = () => {
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const { adsData } = loaderData || {}
   const [emblaReference] = useEmblaCarousel({ loop: true }, [Autoplay()])
+  const fetcher = useFetcher()
 
   return (
     <div className="">
@@ -17,24 +19,25 @@ export const Banner = () => {
           ref={emblaReference}
         >
           <div className="embla__container flex">
-            {adsData?.map(({ image_url: urlImage, url: link, id }, index) => (
-              <div
+            {adsData?.map(({ image_url: urlImage, url, id }, index) => (
+              <fetcher.Form
+                method="POST"
+                action={`/actions/log/ads/${id}`}
                 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"
-                  target="_blank"
-                  rel="noopener noreferrer"
+                <Button
+                  className="h-full w-full cursor-pointer py-2"
+                  type="submit"
+                  onClick={() => window.open(url, '_blank')}
                 >
                   <img
                     src={urlImage}
                     alt={id}
                     className="h-[70px] w-[100%] object-contain object-center sm:h-full"
                   />
-                </Link>
-              </div>
+                </Button>
+              </fetcher.Form>
             ))}
           </div>
         </div>