46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { useRouteLoaderData } from 'react-router'
|
|
|
|
import { Card } from '~/components/ui/card'
|
|
import { CarouselHero } from '~/components/ui/carousel-hero'
|
|
import { CarouselSection } from '~/components/ui/carousel-section'
|
|
import { Newsletter } from '~/components/ui/newsletter'
|
|
import { type loader } from '~/routes/_news._index'
|
|
import type { TNews } from '~/types/news'
|
|
|
|
export const NewsPage = () => {
|
|
const loaderData = useRouteLoaderData<typeof loader>('routes/_news._index')
|
|
const spotlight: TNews = {
|
|
title: loaderData?.spotlightCategory?.name || '',
|
|
description: loaderData?.spotlightCategory?.description || '',
|
|
items: loaderData?.spotlightNews || [],
|
|
}
|
|
const berita: TNews = {
|
|
title: loaderData?.beritaCategory?.name || '',
|
|
description: loaderData?.beritaCategory?.description || '',
|
|
items: loaderData?.beritaNews || [],
|
|
}
|
|
const kajian: TNews = {
|
|
title: loaderData?.kajianCategory?.name || '',
|
|
description: loaderData?.kajianCategory?.description || '',
|
|
items: loaderData?.kajianNews || [],
|
|
}
|
|
|
|
return (
|
|
<div className="relative">
|
|
<Card>
|
|
<CarouselHero {...spotlight} />
|
|
</Card>
|
|
<div className="min-h-[400px] sm:min-h-[300px]">
|
|
<Newsletter className="mr-0 sm:-ml-14" />
|
|
</div>
|
|
|
|
<Card>
|
|
<CarouselSection {...berita} />
|
|
</Card>
|
|
<Card>
|
|
<CarouselSection {...kajian} />
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|