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

app/pages/news-detail/index.tsx

@@ -7,13 +7,18 @@ import { CarouselSection } from '~/components/ui/carousel-section'
 import { NewsAuthor } from '~/components/ui/news-author'
 import { SocialShareButtons } from '~/components/ui/social-share'
 import { Tags } from '~/components/ui/tags'
-import { BERITA } from '~/data/contents'
 import type { loader } from '~/routes/_news.detail.$slug'
+import type { TNews } from '~/types/news'
 
 export const NewsDetailPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_news.detail.$slug',
   )
+  const berita: TNews = {
+    title: loaderData?.beritaCategory?.name || '',
+    description: loaderData?.beritaCategory?.description || '',
+    items: loaderData?.beritaNews || [],
+  }
   const currentUrl = globalThis.location
   const { title, content, featured_image, author, live_at, tags } =
     loaderData?.newsDetailData || {}
@@ -69,7 +74,7 @@ export const NewsDetailPage = () => {
       </Card>
 
       <Card className="bg-white p-5 max-sm:hidden">
-        <CarouselSection {...BERITA} />
+        <CarouselSection {...berita} />
       </Card>
     </div>
   )

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} />