Merge remote-tracking branch 'origin/master' into feature/slicing

app/pages/news-detail/index.tsx

@@ -1,7 +1,9 @@
 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 { ProfileIcon } from '~/components/icons/profile'
 import { Card } from '~/components/ui/card'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { SocialShareButtons } from '~/components/ui/social-share'
@@ -14,10 +16,11 @@ export const NewsDetailPage = () => {
     'routes/_news.detail.$slug',
   )
   const currentUrl = globalThis.location
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { newsDetailData }: any = loaderData
+  const { newsDetailData } = loaderData || {}
   const { title, content, featured_image, author, live_at, tags } =
-    newsDetailData
+    newsDetailData || {}
+
+  const { text } = useReadingTime(content || '')
 
   return (
     <div className="sm-max:mx-5 relative">
@@ -27,17 +30,26 @@ export const NewsDetailPage = () => {
             {title}
           </h2>
 
-          {/* next planing create component for this section */}
+          {/* START TODO: create component for this section */}
           <div className="my-5 w-full items-center justify-between gap-2 align-middle sm:flex">
             <div className="mb-2 flex items-center gap-2 align-middle">
-              <img
-                src={author.avatar}
-                alt={author.name}
-                className="h-12 w-12 rounded-full"
-              />
+              {author?.profile_picture ? (
+                <img
+                  src={author?.profile_picture}
+                  alt={author?.name}
+                  className="h-12 w-12 rounded-full bg-[#C4C4C4] object-cover"
+                />
+              ) : (
+                <ProfileIcon className="h-12 w-12 rounded-full bg-[#C4C4C4]" />
+              )}
+
               <div>
-                <h4 className="text-md">{author.name}</h4>
-                <p className="text-sm">{formatDate(live_at)} . 5 min read </p>
+                <h4 className="text-md">{author?.name}</h4>
+                <p className="flex gap-1 text-sm">
+                  <span>{live_at && `${formatDate(live_at)}`}</span>
+                  <span>·</span>
+                  <span>{text}</span>
+                </p>
               </div>
             </div>
             {/* <IconsSocial className="flex-row" /> */}
@@ -46,7 +58,7 @@ export const NewsDetailPage = () => {
               title={title}
             />
           </div>
-          {/* end next planing create component for this section */}
+          {/* END TODO: create component for this section */}
           <div className="w-full bg-amber-200">
             <img
               src={featured_image}
@@ -57,7 +69,7 @@ export const NewsDetailPage = () => {
 
           <div className="mt-8 flex items-center justify-center">
             <article className="prose prose-stone">
-              {htmlParse(content)}
+              {content && htmlParse(content)}
             </article>
           </div>
           <div className="items-end justify-between border-b-gray-300 py-4 sm:flex">