refactor: integrate autoplay functionality in Banner and enhance news data handling

app/components/ui/banner.tsx

@@ -1,10 +1,11 @@
+import Autoplay from 'embla-carousel-autoplay'
 import useEmblaCarousel from 'embla-carousel-react'
 import { Link } from 'react-router'
 
 import { BANNER } from '~/data/contents'
 
 export const Banner = () => {
-  const [emblaReference] = useEmblaCarousel({ loop: false })
+  const [emblaReference] = useEmblaCarousel({ loop: true }, [Autoplay()])
 
   return (
     <div className="">

app/pages/news/index.tsx

@@ -19,6 +19,11 @@ export const NewsPage = () => {
     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">
@@ -32,9 +37,9 @@ export const NewsPage = () => {
       <Card>
         <CarouselSection {...berita} />
       </Card>
-      {/* <Card>
-          <CarouselSection {...KAJIAN} />
-        </Card> */}
+      <Card>
+        <CarouselSection {...kajian} />
+      </Card>
     </div>
   )
 }

app/routes/_news._index.tsx

@@ -6,17 +6,33 @@ import type { Route } from './+types/_news._index'
 
 export const loader = async ({}: Route.LoaderArgs) => {
   const { data: categoriesData } = await getCategories()
+
   const spotlightCode = 'spotlight'
   const spotlightCategory = categoriesData.find(
     (category) => category.code === spotlightCode,
   )
   const { data: spotlightNews } = await getNews({ categories: [spotlightCode] })
+
   const beritaCode = 'berita'
   const beritaCategory = categoriesData.find(
     (category) => category.code === beritaCode,
   )
   const { data: beritaNews } = await getNews({ categories: [beritaCode] })
-  return { spotlightCategory, spotlightNews, beritaCategory, beritaNews }
+
+  const kajianCode = 'kajian'
+  const kajianCategory = categoriesData.find(
+    (category) => category.code === kajianCode,
+  )
+  const { data: kajianNews } = await getNews({ categories: [kajianCode] })
+
+  return {
+    spotlightCategory,
+    spotlightNews,
+    beritaCategory,
+    beritaNews,
+    kajianCategory,
+    kajianNews,
+  }
 }
 
 const NewsIndexLayout = () => <NewsPage />