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