feat: implement news fetching API and integrate with dashboard contents

app/pages/dashboard-contents/data.ts

@@ -1,4 +1,4 @@
-type TContens = {
+type TContents = {
   id: number
   createdAt: string
   author: string
@@ -8,7 +8,7 @@ type TContens = {
   status: string
 }
 
-export const CONTENTS: TContens[] = [
+export const CONTENTS: TContents[] = [
   {
     id: 1,
     createdAt: '24/10/2024',

app/pages/dashboard-contents/index.tsx

@@ -1,35 +1,39 @@
 import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
-import { Link } from 'react-router'
+import { Link, useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
-
-import { CONTENTS } from './data'
+import type { loader } from '~/routes/_admin.lg-admin._dashboard.contents'
 
 export const ContentsPage = () => {
+  const loaderData = useRouteLoaderData<typeof loader>(
+    'routes/_admin.lg-admin._dashboard.contents',
+  )
+  const newsData = loaderData?.newsData
+
   DataTable.use(DT)
-  const dataTable = CONTENTS
+  const dataTable = newsData
   const dataColumns = [
     { title: 'No', data: 'id' },
-    { title: 'Tanggal Kontent', data: 'createdAt' },
-    { title: 'Nama Penulis', data: 'author' },
+    { title: 'Tanggal Konten', data: 'created_at' },
+    { title: 'Nama Penulis', data: 'author_id' },
     { title: 'Judul', data: 'title' },
-    { title: 'Kategori', data: 'category' },
+    // { title: 'Kategori', data: 'category' },
     {
       title: 'Tags',
-      data: 'tags',
+      data: 'is_premium',
       render: (value: string) => {
-        return value === 'Normal'
-          ? `<span class="bg-[#F5F5F5] text-[#4C5CA0] px-2 py-1 rounded-md">${value}</span>`
-          : `<span class="bg-[#FFFCAF] px-2 py-1 rounded-md">${value}</span>`
+        return value
+          ? `<span class="bg-[#FFFCAF] px-2 py-1 rounded-md">Premium</span>`
+          : `<span class="bg-[#F5F5F5] text-[#4C5CA0] px-2 py-1 rounded-md">Normal</span>`
       },
     },
-    {
-      title: 'Action',
-      data: 'id',
-    },
+    // {
+    //   title: 'Action',
+    //   data: 'id',
+    // },
   ]
   const dataSlot = {
     6: (value: string | number) => {