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

package.json

@@ -33,6 +33,7 @@
     "class-variance-authority": "^0.7.1",
     "datatables.net-dt": "^2.2.2",
     "datatables.net-react": "^1.0.0",
+    "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^8.5.2",
     "html-react-parser": "^5.2.2",
     "isbot": "^5.1.17",

pnpm-lock.yaml

@@ -65,6 +65,9 @@ importers:
       datatables.net-react:
         specifier: ^1.0.0
         version: 1.0.0
+      embla-carousel-autoplay:
+        specifier: ^8.5.2
+        version: 8.5.2(embla-carousel@8.5.2)
       embla-carousel-react:
         specifier: ^8.5.2
         version: 8.5.2(react@19.0.0)
@@ -2331,6 +2334,11 @@ packages:
   electron-to-chromium@1.5.90:
     resolution: {integrity: sha512-C3PN4aydfW91Natdyd449Kw+BzhLmof6tzy5W1pFC5SpQxVXT+oyiyOG9AgYYSN9OdA/ik3YkCrpwqI8ug5Tug==}
 
+  embla-carousel-autoplay@8.5.2:
+    resolution: {integrity: sha512-27emJ0px3q/c0kCHCjwRrEbYcyYUPfGO3g5IBWF1i7714TTzE6L9P81V6PHLoSMAKJ1aHoT2e7YFOsuFKCbyag==}
+    peerDependencies:
+      embla-carousel: 8.5.2
+
   embla-carousel-react@8.5.2:
     resolution: {integrity: sha512-Tmx+uY3MqseIGdwp0ScyUuxpBgx5jX1f7od4Cm5mDwg/dptEiTKf9xp6tw0lZN2VA9JbnVMl/aikmbc53c6QFA==}
     peerDependencies:
@@ -6990,6 +6998,10 @@ snapshots:
 
   electron-to-chromium@1.5.90: {}
 
+  embla-carousel-autoplay@8.5.2(embla-carousel@8.5.2):
+    dependencies:
+      embla-carousel: 8.5.2
+
   embla-carousel-react@8.5.2(react@19.0.0):
     dependencies:
       embla-carousel: 8.5.2