feat: create NewsAuthor component and update news detail page

app/pages/news-detail/index.tsx

@@ -3,13 +3,12 @@ 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 { NewsAuthor } from '~/components/ui/news-author'
 import { SocialShareButtons } from '~/components/ui/social-share'
 import { BERITA } from '~/data/contents'
 import type { loader } from '~/routes/_news.detail.$slug'
-import { formatDate } from '~/utils/formatter'
 
 export const NewsDetailPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
@@ -30,35 +29,18 @@ export const NewsDetailPage = () => {
             {title}
           </h2>
 
-          {/* 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">
-              {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="flex gap-1 text-sm">
-                  <span>{live_at && `${formatDate(live_at)}`}</span>
-                  <span>·</span>
-                  <span>{text}</span>
-                </p>
-              </div>
-            </div>
-
+            <NewsAuthor
+              author={author}
+              live_at={live_at}
+              text={text}
+            />
             <SocialShareButtons
               url={`${currentUrl}`}
               title={`${title}`}
             />
           </div>
-          {/* END TODO: create component for this section */}
+
           <div className="w-full bg-amber-200">
             <img
               src={featured_image}