refactor: enhance news handling and improve content display in various components

app/components/ui/category-section.tsx

@@ -1,14 +1,21 @@
 import { useRouteLoaderData } from 'react-router'
+import { stripHtml } from 'string-strip-html'
 import { twMerge } from 'tailwind-merge'
 
+import type { TNewsResponse } from '~/apis/common/get-news'
 import { CarouselNextIcon } from '~/components/icons/carousel-next'
 import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
 import { Button } from '~/components/ui/button'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news'
-import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
+type TNews = {
+  title: string
+  description: string
+  items: TNewsResponse[]
+}
+
 export const CategorySection = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
@@ -39,7 +46,10 @@ export const CategorySection = (properties: TNews) => {
 
       <div className="grid sm:grid-cols-3 sm:gap-x-8">
         {items.map(
-          ({ featured, title, content, tags, slug, isPremium }, index) => (
+          (
+            { featured_image, title, content, tags, slug, is_premium },
+            index,
+          ) => (
             <div
               key={index}
               className={twMerge('grid sm:gap-x-8')}
@@ -48,7 +58,7 @@ export const CategorySection = (properties: TNews) => {
                 className={twMerge(
                   'aspect-[174/100] w-full rounded-md object-cover sm:aspect-[5/4]',
                 )}
-                src={featured}
+                src={featured_image}
                 alt={title}
               />
               <div className={twMerge('flex flex-col justify-between gap-4')}>
@@ -62,10 +72,10 @@ export const CategorySection = (properties: TNews) => {
                       key={index}
                       className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
                     >
-                      {item}
+                      {item.name}
                     </span>
                   ))}
-                  {isPremium && (
+                  {is_premium && (
                     <span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
                       Premium Content
                     </span>
@@ -80,14 +90,14 @@ export const CategorySection = (properties: TNews) => {
                   >
                     {title}
                   </h3>
-                  <p className="text-md mt-5 text-[#777777] sm:text-xl">
-                    {content}
+                  <p className="text-md mt-5 line-clamp-3 text-[#777777] sm:text-xl">
+                    {stripHtml(content).result}
                   </p>
                 </div>
                 <Button
                   size="block"
                   {...getPremiumAttribute({
-                    isPremium,
+                    isPremium: is_premium,
                     slug,
                     onClick: () => setIsSuccessOpen('warning'),
                     userData,