feat: create NewsAuthor component and update news detail page

app/apis/admin/get-news.ts

@@ -29,6 +29,7 @@ const dataResponseSchema = z.object({
 })
 
 export type TNewsResponse = z.infer<typeof newsResponseSchema>
+export type TAuthor = z.infer<typeof authorSchema>
 
 export const getNews = async (parameters: THttpServer) => {
   try {

app/components/icons/link-icon.tsx

@@ -1,22 +0,0 @@
-import type { JSX, SVGProps } from 'react'
-
-export const LinkIcon = (
-  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
-) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      x="0px"
-      y="0px"
-      width={95}
-      height={95}
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 1024 1024"
-      {...properties}
-    >
-      <path d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"></path>
-    </svg>
-  )
-}

app/components/ui/news-author.tsx

@@ -0,0 +1,34 @@
+import type { TAuthor } from '~/apis/admin/get-news'
+import { ProfileIcon } from '~/components/icons/profile'
+import { formatDate } from '~/utils/formatter'
+
+type TDetailNewsAuthor = {
+  author?: TAuthor
+  live_at?: string
+  text?: string
+}
+
+export const NewsAuthor = ({ author, live_at, text }: TDetailNewsAuthor) => {
+  return (
+    <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>
+  )
+}

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"
+            <NewsAuthor
+              author={author}
+              live_at={live_at}
+              text={text}
             />
-              ) : (
-                <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>
-
             <SocialShareButtons
               url={`${currentUrl}`}
               title={`${title}`}
             />
           </div>
-          {/* END TODO: create component for this section */}
+
           <div className="w-full bg-amber-200">
             <img
               src={featured_image}