feat: enhance news API schema with author and categories details,

desc: update dashboard to display author names, and improve pagination button styles

app/pages/dashboard-contents/index.tsx

@@ -2,11 +2,11 @@ import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
+import type { TAuthor, TCategories } from '~/apis/admin/get-news'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard.contents'
-import type { TCategory } from '~/types/news'
 import { formatDate } from '~/utils/formatter'
 
 export const ContentsPage = () => {
@@ -19,8 +19,8 @@ export const ContentsPage = () => {
   const dataTable = newsData
   const dataColumns = [
     { title: 'No', data: 'id' },
-    { title: 'Tanggal Konten', data: 'created_at' },
-    { title: 'Nama Penulis', data: 'author_id' },
+    { title: 'Tanggal Konten', data: 'live_at' },
+    { title: 'Nama Penulis', data: 'author' },
     { title: 'Judul', data: 'title' },
     { title: 'Kategori', data: 'categories' },
     {
@@ -34,18 +34,17 @@ export const ContentsPage = () => {
     },
     {
       title: 'Action',
-      data: 'id',
+      data: 'slug',
     },
   ]
   const dataSlot = {
     1: (value: string) => {
       return formatDate(value)
     },
-
-    4: (value: TCategory[]) => {
-      return value.map((item: { name: string }) => {
-        return `${item.name}`
-      })
+    2: (value: TAuthor) => `${value.name}`,
+    4: (value: TCategories) => {
+      const categories = value.map((item) => item.name).join(', ')
+      return `${categories}`
     },
     6: (value: string | number) => {
       return (

app/pages/news-detail/data.ts

@@ -1,5 +1,4 @@
-import { DUMMY_DESCRIPTION } from '~/data/contents'
-import type { TNews, TNewsDetail } from '~/types/news'
+import type { TNewsDetail } from '~/types/news'
 
 export const CONTENT: TNewsDetail = {
   title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
@@ -38,35 +37,3 @@ export const CONTENT: TNewsDetail = {
   categories: [],
   tags: ['Category', 'Popular', 'Trending', 'Latest'],
 }
-
-export const BERITA: TNews = {
-  title: 'BERITA',
-  description: DUMMY_DESCRIPTION,
-  items: [
-    {
-      title: 'Travelling as a way of self-discovery and progress',
-      content:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      featured: '/images/news-2.jpg',
-      tags: ['Hukum Property'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      title: 'How does writing influence your personal brand?',
-      content:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      featured: '/images/news-3.jpg',
-      tags: ['Hukum'],
-      slug: 'how-does-writing-influence-your-personal-brand',
-    },
-    {
-      title: 'Helping a local business reinvent itself',
-      content:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      featured: '/images/news-4.jpg',
-      tags: ['Hukum Property'],
-      isPremium: true,
-      slug: 'helping-a-local-business-reinvent-itself',
-    },
-  ],
-}

app/pages/news-detail/index.tsx

@@ -34,7 +34,7 @@ export const NewsDetailPage = () => {
                 </p>
               </div>
             </div>
-            <IconsSocial className="flex-row-reverse" />
+            <IconsSocial className="flex-row" />
           </div>
           {/* end next planing create component for this section */}
           <div className="w-full bg-amber-200">
@@ -50,7 +50,7 @@ export const NewsDetailPage = () => {
               {htmlParse(content)}
             </article>
           </div>
-          <div className="items-end justify-between border-b-3 border-b-gray-300 py-4 sm:flex">
+          <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" />
@@ -66,18 +66,6 @@ export const NewsDetailPage = () => {
               ))}
             </div>
           </div>
-
-          <div className="mt-5 flex items-center gap-2 align-middle">
-            <img
-              src={'https://placehold.co/50x50.png'}
-              alt={title}
-              className="h-12 w-12 rounded-full"
-            />
-            <div>
-              <h4 className="text-md">{author}</h4>
-              <p className="text-sm">Job title, Company name</p>
-            </div>
-          </div>
         </div>
       </Card>