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