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

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>