45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import Autoplay from 'embla-carousel-autoplay'
|
|
import useEmblaCarousel from 'embla-carousel-react'
|
|
import { Link, useRouteLoaderData } from 'react-router'
|
|
|
|
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 (
|
|
<div className="">
|
|
<div className="relative">
|
|
<div
|
|
className="embla overflow-hidden"
|
|
ref={emblaReference}
|
|
>
|
|
<div className="embla__container flex">
|
|
{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"
|
|
>
|
|
<Link
|
|
to={link}
|
|
className="mt-2 h-full py-2"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<img
|
|
src={urlImage}
|
|
alt={id}
|
|
className="h-[70px] w-[100%] object-contain object-center sm:h-full"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|