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?.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">

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

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