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

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