refactor: implement Tags component for improved tag display and update news types

2025-03-09 11:56:57 +08:00 · 2025-03-09 11:56:57 +08:00 · ee816b8db7
commit ee816b8db7
parent 1b6321f2bd
7 changed files with 57 additions and 183 deletions
--- a/app/components/ui/carousel-section.tsx
+++ b/app/components/ui/carousel-section.tsx
@ -9,6 +9,8 @@ import type { loader } from '~/routes/_news'
 import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'

+import { Tags } from './tags'
+
 export const CarouselSection = (properties: TNews) => {
  const { setIsSuccessOpen } = useNewsContext()
  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
@ -89,21 +91,10 @@ export const CarouselSection = (properties: TNews) => {
                    alt={title}
                  />
                  <div className={'flex flex-col justify-between gap-4'}>
-                    <div className={'flex text-sm uppercase'}>
-                      {tags?.map((item) => (
-                        <span
-                          key={index}
-                          className="my-3 mr-2 inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
-                        >
-                          {item}
-                        </span>
-                      ))}
-                      {isPremium && (
-                        <span className="my-3 mr-2 inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
-                          Premium Content
-                        </span>
-                      )}
-                    </div>
+                    <Tags
+                      tags={tags || []}
+                      is_premium={isPremium}
+                    />

                    <div>
                      <h3 className="mt-2 w-full text-xl font-bold sm:text-2xl lg:mt-0">
--- a/app/components/ui/category-section.tsx
+++ b/app/components/ui/category-section.tsx
@ -10,6 +10,8 @@ import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news'
 import { getPremiumAttribute } from '~/utils/render'

+import { Tags } from './tags'
+
 type TNews = {
  title: string
  description: string
@ -62,25 +64,10 @@ export const CategorySection = (properties: TNews) => {
                alt={title}
              />
              <div className={twMerge('flex flex-col justify-between gap-4')}>
-                <div
-                  className={twMerge(
-                    'my-3 flex gap-2 uppercase max-sm:text-sm',
-                  )}
-                >
-                  {tags?.map((item) => (
-                    <span
-                      key={index}
-                      className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
-                    >
-                      {item.name}
-                    </span>
-                  ))}
-                  {is_premium && (
-                    <span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
-                      Premium Content
-                    </span>
-                  )}
-                </div>
+                <Tags
+                  tags={tags}
+                  is_premium={is_premium}
+                />

                <div>
                  <h3
--- a/app/components/ui/tags.tsx
+++ b/app/components/ui/tags.tsx
@ -0,0 +1,32 @@
+import { twMerge } from 'tailwind-merge'
+
+import type { TTagResponse } from '~/apis/common/get-tags'
+
+type TProperties = {
+  tags: TTagResponse[]
+  is_premium?: boolean
+  className?: string
+}
+
+export const Tags = (properties: TProperties) => {
+  const { tags, is_premium, className } = properties
+  return (
+    <div
+      className={twMerge('my-3 flex gap-2 uppercase max-sm:text-sm', className)}
+    >
+      {tags?.map((tag) => (
+        <span
+          key={tag.id}
+          className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
+        >
+          {tag.name}
+        </span>
+      ))}
+      {is_premium && (
+        <span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
+          Premium Content
+        </span>
+      )}
+    </div>
+  )
+}
--- a/app/data/contents.ts
+++ b/app/data/contents.ts
@ -8,7 +8,7 @@ type TBanner = {
  createdAt?: string
 }

-export const DUMMY_DESCRIPTION = 'Berita Terhangat hari ini'
+const DUMMY_DESCRIPTION = 'Berita Terhangat hari ini'

 export const SPOTLIGHT: TNews = {
  title: 'SPOTLIGHT',
@ -47,7 +47,7 @@ export const BERITA: TNews = {
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
      featured: '/images/news-2.jpg',
-      tags: ['Hukum Property'],
+      tags: [{ id: '1', code: 'hukum-property', name: 'Hukum Property' }],
      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
    },
    {
@ -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-3.jpg',
-      tags: ['Hukum'],
+      tags: [{ id: '2', code: 'hukum', name: 'Hukum' }],
      slug: 'how-does-writing-influence-your-personal-brand',
    },
    {
@ -63,7 +63,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'],
+      tags: [{ id: '3', code: 'hukum-property', name: 'Hukum Property' }],
      isPremium: true,
      slug: 'helping-a-local-business-reinvent-itself',
    },
@ -72,7 +72,7 @@ export const BERITA: TNews = {
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
      featured: 'https://placehold.co/600x400.png',
-      tags: ['Hukum Property'],
+      tags: [{ id: '1', code: 'hukum-property', name: 'Hukum Property' }],
      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
    },
    {
@ -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-3.jpg',
-      tags: ['Hukum'],
+      tags: [{ id: '2', code: 'hukum', name: 'Hukum' }],
      slug: 'how-does-writing-influence-your-personal-brand',
    },
    {
@ -88,7 +88,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'],
+      tags: [{ id: '3', code: 'hukum-property', name: 'Hukum Property' }],
      isPremium: true,
      slug: 'helping-a-local-business-reinvent-itself',
    },
--- a/app/pages/news-categories/data.ts
+++ b/app/pages/news-categories/data.ts
@ -1,130 +0,0 @@
-import { DUMMY_DESCRIPTION } from '~/data/contents'
-import type { TNews } from '~/types/news'
-
-export const BERITA: TNews = {
-  title: 'BERITA',
-  description: DUMMY_DESCRIPTION,
-  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'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      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'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      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'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      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'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      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'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      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'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      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'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      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'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      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'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      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'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      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'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      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'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      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'],
-      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'],
-      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'],
-      isPremium: true,
-      slug: 'helping-a-local-business-reinvent-itself',
-    },
-  ],
-}
--- a/app/pages/news-detail/index.tsx
+++ b/app/pages/news-detail/index.tsx
@ -2,11 +2,11 @@ import htmlParse from 'html-react-parser'
 import { useReadingTime } from 'react-hook-reading-time'
 import { useRouteLoaderData } from 'react-router'

-import type { TTagResponse } from '~/apis/common/get-tags'
 import { Card } from '~/components/ui/card'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { NewsAuthor } from '~/components/ui/news-author'
 import { SocialShareButtons } from '~/components/ui/social-share'
+import { Tags } from '~/components/ui/tags'
 import { BERITA } from '~/data/contents'
 import type { loader } from '~/routes/_news.detail.$slug'

@ -62,16 +62,8 @@ export const NewsDetailPage = () => {
                title={`${title}`}
              />
            </div>
-            <div className="my-3 flex gap-2 uppercase max-sm:text-sm">
-              {tags?.map((tag: TTagResponse) => (
-                <span
-                  key={tag.id}
-                  className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
-                >
-                  {tag.name}
-                </span>
-              ))}
-            </div>
+
+            <Tags tags={tags || []} />
          </div>
        </div>
      </Card>
--- a/app/types/news.ts
+++ b/app/types/news.ts
@ -1,3 +1,5 @@
+import type { TTagResponse } from '~/apis/common/get-tags'
+
 export type TNews = {
  title: string
  description: string
@ -14,7 +16,7 @@ type TNewsDetail = {
  author: string
  date: Date
  slug: string
-  tags?: Array<string>
+  tags?: TTagResponse[]
  isPremium?: boolean
  categories?: Array<string>
 }