feat: replace inline button with reusable Button component in dashboard contents

app/pages/dashboard-contents/index.tsx

@@ -3,6 +3,7 @@ import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
 
 import { SearchIcon } from '~/components/icons/search'
+import { Button } from '~/components/ui/button'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 
 import { CONTENTS } from './data'
@@ -27,9 +28,6 @@ export const ContentsPage = () => {
     {
       title: 'Action',
       data: 'id',
-      render: () => {
-        return '<button class="bg-[#2E2F7C] text-white px-2 py-1 rounded-md">Lihat Detail</button>'
-      },
     },
   ]
 
@@ -70,6 +68,18 @@ export const ContentsPage = () => {
           className="cell-border"
           data={CONTENTS}
           columns={columns}
+          slots={{
+            6: (value: string | number) => {
+              return (
+                <Button
+                  as="a"
+                  href={`${value}`}
+                >
+                  Lihat Detail
+                </Button>
+              )
+            },
+          }}
           options={{
             paging: true,
             searching: true,