From fe9b8bc97a7d6ae5c420a43a4d317315fcf5cb8a Mon Sep 17 00:00:00 2001 From: Ardeman Date: Tue, 25 Feb 2025 04:48:13 +0800 Subject: [PATCH] refactor: simplify Carousel component and update news data structure for clarity --- app/components/ui/carousel.tsx | 4 +-- app/data/meta.ts | 16 ++++++++-- app/pages/news-categories/data.ts | 50 ++----------------------------- app/pages/news-detail/data.ts | 3 +- app/pages/news/data.ts | 16 ++++++---- package.json | 1 + pnpm-lock.yaml | 28 +++++++++++++++++ 7 files changed, 58 insertions(+), 60 deletions(-) diff --git a/app/components/ui/carousel.tsx b/app/components/ui/carousel.tsx index 378df8b..8154d1b 100644 --- a/app/components/ui/carousel.tsx +++ b/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 hasCategory = location.pathname.includes('/category/') + const { pathname } = useLocation() + const hasCategory = pathname.includes('/category/') const { title, description, items, type } = properties const itemsPerPage = type === 'hero' ? 1 : 3 diff --git a/app/data/meta.ts b/app/data/meta.ts index f0fd0b5..2f6bd55 100644 --- a/app/data/meta.ts +++ b/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 })), + ), ] diff --git a/app/pages/news-categories/data.ts b/app/pages/news-categories/data.ts index 570bc87..af44db7 100644 --- a/app/pages/news-categories/data.ts +++ b/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'], - slug: 'helping-a-local-business-reinvent-itself', - }, - ], -} - -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'], + tags: ['Hukum Property'], + isPremium: true, slug: 'helping-a-local-business-reinvent-itself', }, ], diff --git a/app/pages/news-detail/data.ts b/app/pages/news-detail/data.ts index 32e1159..b083efb 100644 --- a/app/pages/news-detail/data.ts +++ b/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', }, ], diff --git a/app/pages/news/data.ts b/app/pages/news/data.ts index f9cd65f..2606211 100644 --- a/app/pages/news/data.ts +++ b/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', }, ], diff --git a/package.json b/package.json index e0a1981..7f117de 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9fcbe75..2a699d2 100644 --- a/pnpm-lock.yaml +++ b/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: {}