legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ardeman 2025-03-12 11:03:53 +08:00
parent 930d4b8459
commit 4a21b7d331
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/layouts/news/banner.tsx
View File

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

3
app/routes/_news.tsx
View File

@ -1,6 +1,7 @@
import { isRouteErrorResponse, Outlet } from 'react-router' import { isRouteErrorResponse, Outlet } from 'react-router'
import { XiorError } from 'xior' import { XiorError } from 'xior'
import { getAds } from '~/apis/common/get-ads'
import { getCategories } from '~/apis/common/get-categories' import { getCategories } from '~/apis/common/get-categories'
import { getSubscriptions } from '~/apis/common/get-subscriptions' import { getSubscriptions } from '~/apis/common/get-subscriptions'
import { getUser } from '~/apis/news/get-user' import { getUser } from '~/apis/news/get-user'
@ -28,11 +29,13 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
} }
const { data: subscriptionsData } = await getSubscriptions() const { data: subscriptionsData } = await getSubscriptions()
const { data: categoriesData } = await getCategories() const { data: categoriesData } = await getCategories()
const { data: adsData } = await getAds()
return { return {
userData, userData,
subscriptionsData, subscriptionsData,
categoriesData, categoriesData,
adsData,
} }
} }