feat: implement UiTable component and refactor dashboard pages to use it

app/pages/dashboard-contents/index.tsx

@@ -4,13 +4,15 @@ import DataTable from 'datatables.net-react'
 
 import { SearchIcon } from '~/components/icons/search'
 import { Button } from '~/components/ui/button'
+import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 
 import { CONTENTS } from './data'
 
 export const ContentsPage = () => {
   DataTable.use(DT)
-  const columns = [
+  const dataTable = CONTENTS
+  const dataColumns = [
     { title: 'No', data: 'id' },
     { title: 'Tanggal Kontent', data: 'createdAt' },
     { title: 'Nama Penulis', data: 'author' },
@@ -30,6 +32,27 @@ export const ContentsPage = () => {
       data: 'id',
     },
   ]
+  const dataSlot = {
+    6: (value: string | number) => {
+      return (
+        <Button
+          as="a"
+          href={`/lg-admin/contents/update/${value}`}
+          className="text-md rounded-md"
+          size="sm"
+        >
+          Lihat Detail
+        </Button>
+      )
+    },
+  }
+  const dataOptions = {
+    paging: true,
+    searching: true,
+    ordering: true,
+    info: true,
+    // scrollY: '50vh',
+  }
 
   return (
     <div className="relative">
@@ -62,35 +85,14 @@ export const ContentsPage = () => {
           </Field>
         </div>
       </div>
-      <div className="rounded-lg bg-white p-6 shadow-md">
-        <h3 className="py-1 font-semibold text-[#4C5CA0]">Daftar Content</h3>
-        <DataTable
-          className="cell-border"
-          data={CONTENTS}
-          columns={columns}
-          slots={{
-            6: (value: string | number) => {
-              return (
-                <Button
-                  as="a"
-                  href={`/lg-admin/contents/update/${value}`}
-                  className="text-md rounded-md"
-                  size="sm"
-                >
-                  Lihat Detail
-                </Button>
-              )
-            },
-          }}
-          options={{
-            paging: true,
-            searching: true,
-            ordering: true,
-            info: true,
-            // scrollY: '50vh',
-          }}
-        ></DataTable>
-      </div>
+
+      <UiTable
+        data={dataTable}
+        columns={dataColumns}
+        slots={dataSlot}
+        options={dataOptions}
+        title="Daftar Konten"
+      />
     </div>
   )
 }