refactor: simplify Carousel component and update news data structure for clarity

app/components/ui/carousel.tsx

@@ -10,8 +10,8 @@ import { Button } from './button'
 
 export const Carousel = (properties: TNews) => {
   const [currentIndex, setCurrentIndex] = useState(0)
-  const location = useLocation()
+  const { pathname } = useLocation()
-  const hasCategory = location.pathname.includes('/category/')
+  const hasCategory = pathname.includes('/category/')
 
   const { title, description, items, type } = properties
   const itemsPerPage = type === 'hero' ? 1 : 3

app/data/meta.ts

@@ -1,3 +1,5 @@
+import { MENU as ADMIN_MENU } from '~/layouts/admin/menu'
+
 export const APP = {
   title: 'LegalGo',
   description:
@@ -5,17 +7,25 @@ export const APP = {
   logo: '/images/logo.png',
 }
 
-export const META_TITLE_CONFIG = [
+type TMetaTitleConfig = {
+  path: string
+  title: string
+}[]
+
+export const META_TITLE_CONFIG: TMetaTitleConfig = [
   {
     path: '/news',
     title: 'Home',
   },
   {
-    path: '/auth/login',
+    path: '/admin/auth/login',
     title: 'Login',
   },
   {
-    path: '/auth/register',
+    path: '/admin/auth/register',
     title: 'Register',
   },
+  ...ADMIN_MENU.flatMap((menu) =>
+    menu.items.map((item) => ({ path: item.url, title: item.title })),
+  ),
 ]

app/pages/news-categories/data.ts

@@ -1,20 +1,5 @@
 import type { TNews } from '~/types/news'
 
-export const SPOTLIGHT: TNews = {
-  title: 'SPOTLIGHT',
-  description: 'Berita Terhangat hari ini',
-  type: 'hero',
-  items: [
-    {
-      title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
-      content:
-        'Pengacara Kondang, Hotman Paris Hutapea, membuka sebuah perpustakaan baru di dalam diskotik nya yang berlokasi di daerah Jakarta Pusat, Hotman berkata Perpustakaan ini dibuka dengan harapan untuk meningkatkan gairah membaca masyarakat Indonesia, namun sayangnya..',
-      featured: '/images/news-1.jpg',
-      slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
-    },
-  ],
-}
-
 export const BERITA: TNews = {
   title: 'BERITA',
   description: 'Berita Terhangat hari ini',
@@ -137,39 +122,8 @@ export const BERITA: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-4.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
-      slug: 'helping-a-local-business-reinvent-itself',
+      isPremium: true,
-    },
-  ],
-}
-
-export const KAJIAN: TNews = {
-  title: 'KAJIAN',
-  description: 'Berita Terhangat hari ini',
-  type: 'grid',
-  items: [
-    {
-      title: 'Travelling as a way of self-discovery and progress',
-      content:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      featured: '/images/news-2.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      title: 'How does writing influence your personal brand?',
-      content:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      featured: '/images/news-3.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
-      slug: 'how-does-writing-influence-your-personal-brand',
-    },
-    {
-      title: 'Helping a local business reinvent itself',
-      content:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      featured: '/images/news-4.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
       slug: 'helping-a-local-business-reinvent-itself',
     },
   ],

app/pages/news-detail/data.ts

@@ -64,7 +64,8 @@ export const BERITA: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-4.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
+      isPremium: true,
       slug: 'helping-a-local-business-reinvent-itself',
     },
   ],

app/pages/news/data.ts

@@ -55,7 +55,7 @@ export const BERITA: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-4.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
       isPremium: true,
       slug: 'helping-a-local-business-reinvent-itself',
     },
@@ -80,7 +80,7 @@ export const BERITA: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-4.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
       isPremium: true,
       slug: 'helping-a-local-business-reinvent-itself',
     },
@@ -97,7 +97,8 @@ export const KAJIAN: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-2.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
+      isPremium: true,
       slug: 'travelling-as-a-way-of-self-discovery-and-progress',
     },
     {
@@ -105,7 +106,8 @@ export const KAJIAN: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: 'https://placehold.co/600x400.png',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
+      isPremium: true,
       slug: 'travelling-as-a-way-of-self-discovery-and-progress',
     },
     {
@@ -113,7 +115,8 @@ export const KAJIAN: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-3.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
+      isPremium: true,
       slug: 'how-does-writing-influence-your-personal-brand',
     },
     {
@@ -121,7 +124,8 @@ export const KAJIAN: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-4.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
+      isPremium: true,
       slug: 'helping-a-local-business-reinvent-itself',
     },
   ],

package.json

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

pnpm-lock.yaml

@@ -38,6 +38,9 @@ importers:
       datatables.net-react:
         specifier: ^1.0.0
         version: 1.0.0
+      embla-carousel-react:
+        specifier: ^8.5.2
+        version: 8.5.2(react@19.0.0)
       html-react-parser:
         specifier: ^5.2.2
         version: 5.2.2(@types/react@19.0.8)(react@19.0.0)
@@ -2042,6 +2045,19 @@ packages:
   electron-to-chromium@1.5.90:
     resolution: {integrity: sha512-C3PN4aydfW91Natdyd449Kw+BzhLmof6tzy5W1pFC5SpQxVXT+oyiyOG9AgYYSN9OdA/ik3YkCrpwqI8ug5Tug==}
 
+  embla-carousel-react@8.5.2:
+    resolution: {integrity: sha512-Tmx+uY3MqseIGdwp0ScyUuxpBgx5jX1f7od4Cm5mDwg/dptEiTKf9xp6tw0lZN2VA9JbnVMl/aikmbc53c6QFA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.5.2:
+    resolution: {integrity: sha512-QC8/hYSK/pEmqEdU1IO5O+XNc/Ptmmq7uCB44vKplgLKhB/l0+yvYx0+Cv0sF6Ena8Srld5vUErZkT+yTahtDg==}
+    peerDependencies:
+      embla-carousel: 8.5.2
+
+  embla-carousel@8.5.2:
+    resolution: {integrity: sha512-xQ9oVLrun/eCG/7ru3R+I5bJ7shsD8fFwLEY7yPe27/+fDHCNj0OT5EoG5ZbFyOxOcG6yTwW8oTz/dWyFnyGpg==}
+
   emoji-regex@10.4.0:
     resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
 
@@ -6190,6 +6206,18 @@ snapshots:
 
   electron-to-chromium@1.5.90: {}
 
+  embla-carousel-react@8.5.2(react@19.0.0):
+    dependencies:
+      embla-carousel: 8.5.2
+      embla-carousel-reactive-utils: 8.5.2(embla-carousel@8.5.2)
+      react: 19.0.0
+
+  embla-carousel-reactive-utils@8.5.2(embla-carousel@8.5.2):
+    dependencies:
+      embla-carousel: 8.5.2
+
+  embla-carousel@8.5.2: {}
+
   emoji-regex@10.4.0: {}
 
   emoji-regex@8.0.0: {}