diff --git a/app/components/ui/banner.tsx b/app/components/ui/banner.tsx
index 354f5e7..0ba09ec 100644
--- a/app/components/ui/banner.tsx
+++ b/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 (
diff --git a/app/pages/news/index.tsx b/app/pages/news/index.tsx
index 283c05b..2625511 100644
--- a/app/pages/news/index.tsx
+++ b/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 (
@@ -32,9 +37,9 @@ export const NewsPage = () => {
- {/*
-
- */}
+
+
+
)
}
diff --git a/app/routes/_news._index.tsx b/app/routes/_news._index.tsx
index 3ac1ba8..6b1e187 100644
--- a/app/routes/_news._index.tsx
+++ b/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 = () =>
diff --git a/package.json b/package.json
index 5f93d18..f94c5fa 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9c10c9f..973cf7c 100644
--- a/pnpm-lock.yaml
+++ b/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