feat: enhance news detail page with dynamic data loading and social sharing functionality

app/pages/news-detail/index.tsx

@@ -1,20 +1,28 @@
 import htmlParse from 'html-react-parser'
+import { useRouteLoaderData } from 'react-router'
 
-import { Breadcrumb } from '~/components/ui/breadcrumb'
+import type { TTagResponse } from '~/apis/common/get-tags'
 import { Card } from '~/components/ui/card'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { IconsSocial } from '~/components/ui/social-share'
 import { BERITA } from '~/data/contents'
-
-import { CONTENT } from './data'
+import type { loader } from '~/routes/_news.detail.$slug'
+import { formatDate } from '~/utils/formatter'
 
 export const NewsDetailPage = () => {
-  const { title, content, featured, slug, author, date, tags } = CONTENT
+  const loaderData = useRouteLoaderData<typeof loader>(
+    'routes/_news.detail.$slug',
+  )
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { newsDetailData }: any = loaderData
+  const { title, content, featured_image, slug, author, live_at, tags } =
+    newsDetailData
+
   return (
     <div className="sm-max:mx-5 relative">
       <Card>
         <div className="py-5 sm:px-30">
-          <Breadcrumb slug={slug} />
           <h2 className="text-xl font-extrabold text-[#2E2F7C] sm:text-4xl">
             {title}
           </h2>
@@ -28,10 +36,8 @@ export const NewsDetailPage = () => {
                 className="h-12 w-12 rounded-full"
               />
               <div>
-                <h4 className="text-md">{author}</h4>
-                <p className="text-sm">
-                  {date.toJSON().slice(0, 10)} . 5 min read{' '}
-                </p>
+                <h4 className="text-md">{author.name}</h4>
+                <p className="text-sm">{formatDate(live_at)} . 5 min read </p>
               </div>
             </div>
             <IconsSocial className="flex-row" />
@@ -39,7 +45,7 @@ export const NewsDetailPage = () => {
           {/* end next planing create component for this section */}
           <div className="w-full bg-amber-200">
             <img
-              src={featured}
+              src={featured_image}
               alt={title}
               className="w-full object-cover object-center sm:h-[600px]"
             />
@@ -53,15 +59,18 @@ export const NewsDetailPage = () => {
           <div className="items-end justify-between border-b-gray-300 py-4 sm:flex">
             <div className="flex flex-col max-sm:mb-3">
               <p className="mb-2">Share this post</p>
-              <IconsSocial className="a" />
+              <IconsSocial
+                className="a"
+                slug={slug}
+              />
             </div>
             <div className="flex flex-wrap items-end gap-2">
-              {tags?.map((tag) => (
+              {tags?.map((tag: TTagResponse) => (
                 <span
-                  key={tag}
+                  key={tag.id}
                   className="rounded bg-gray-300 p-1"
                 >
-                  {tag}
+                  {tag.name}
                 </span>
               ))}
             </div>