refactor: update news types and enhance news data handling in components

app/pages/news/index.tsx

@@ -1,21 +1,36 @@
+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 { BERITA, SPOTLIGHT } from '~/data/contents'
+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 || [],
+  }
+
   return (
     <div className="relative">
       <Card>
-        <CarouselHero {...SPOTLIGHT} />
+        <CarouselHero {...spotlight} />
       </Card>
       <div className="min-h-[400px] sm:min-h-[300px]">
         <Newsletter className="mr-0 sm:-ml-14" />
       </div>
 
       <Card>
-        <CarouselSection {...BERITA} />
+        <CarouselSection {...berita} />
       </Card>
       {/* <Card>
           <CarouselSection {...KAJIAN} />