From 0b6327e2fb256c55a49681fb46724e7552c7cfcf Mon Sep 17 00:00:00 2001
From: "fredy.siswanto" <fredy.siswanto@komunal.co.id>
Date: Sat, 8 Mar 2025 21:29:39 +0700
Subject: [PATCH] feat: create NewsAuthor component and update news detail page

---
 app/apis/admin/get-news.ts         |  1 +
 app/components/icons/link-icon.tsx | 22 -------------------
 app/components/ui/news-author.tsx  | 34 ++++++++++++++++++++++++++++++
 app/pages/news-detail/index.tsx    | 32 ++++++----------------------
 4 files changed, 42 insertions(+), 47 deletions(-)
 delete mode 100644 app/components/icons/link-icon.tsx
 create mode 100644 app/components/ui/news-author.tsx

diff --git a/app/apis/admin/get-news.ts b/app/apis/admin/get-news.ts
index 0b540f2..a6f5896 100644
--- a/app/apis/admin/get-news.ts
+++ b/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 {
diff --git a/app/components/icons/link-icon.tsx b/app/components/icons/link-icon.tsx
deleted file mode 100644
index db5f618..0000000
--- a/app/components/icons/link-icon.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/app/components/ui/news-author.tsx b/app/components/ui/news-author.tsx
new file mode 100644
index 0000000..c6df263
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/app/pages/news-detail/index.tsx b/app/pages/news-detail/index.tsx
index 36b3ac6..a31168d 100644
--- a/app/pages/news-detail/index.tsx
+++ b/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}