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

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
-                      {tags?.map((item) => (
+                      tags={tags || []}
-                        <span
+                      is_premium={isPremium}
-                          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>
 
                     <div>
                       <h3 className="mt-2 w-full text-xl font-bold sm:text-2xl lg:mt-0">

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
+                <Tags
-                  className={twMerge(
+                  tags={tags}
-                    'my-3 flex gap-2 uppercase max-sm:text-sm',
+                  is_premium={is_premium}
-                  )}
+                />
-                >
-                  {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>
 
                 <div>
                   <h3

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>
+  )
+}

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',
     },

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',
-    },
-  ],
-}

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) => (
+            <Tags tags={tags || []} />
-                <span
-                  key={tag.id}
-                  className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
-                >
-                  {tag.name}
-                </span>
-              ))}
-            </div>
           </div>
         </div>
       </Card>

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>
 }