feat: add delete functionality for news articles with confirmation dialog

app/pages/dashboard-contents/index.tsx

@@ -1,10 +1,17 @@
+import {
+  PencilSquareIcon,
+  PlusIcon,
+  TrashIcon,
+} from '@heroicons/react/24/solid'
 import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
 import DataTable, { type DataTableSlots } from 'datatables.net-react'
+import { useState } from 'react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TCategoryResponse } from '~/apis/common/get-categories'
-import type { TAuthorResponse } from '~/apis/common/get-news'
+import type { TAuthorResponse, TNewsResponse } from '~/apis/common/get-news'
 import type { TTagResponse } from '~/apis/common/get-tags'
+import { DialogDelete } from '~/components/dialog/delete'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
@@ -15,7 +22,7 @@ export const ContentsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard.contents._index',
   )
-
+  const [selectedContent, setSelectedContent] = useState<TNewsResponse>()
   DataTable.use(DT)
   const dataTable =
     loaderData?.newsData?.sort(
@@ -81,15 +88,26 @@ export const ContentsPage = () => {
           Normal
         </div>
       ),
-    7: (value: string) => (
-      <Button
-        as="a"
-        href={`/lg-admin/contents/update/${encodeURIComponent(value)}`}
-        className="text-md rounded-md"
-        size="sm"
-      >
-        Update Artikel
-      </Button>
+    7: (value: string, _type: unknown, data: TNewsResponse) => (
+      <div className="flex space-x-2">
+        <Button
+          as="a"
+          href={`/lg-admin/contents/update/${encodeURIComponent(value)}`}
+          size="icon"
+          title="Update Artikel"
+        >
+          <PencilSquareIcon className="size-4" />
+        </Button>
+        <Button
+          type="button"
+          size="icon"
+          variant="danger"
+          onClick={() => setSelectedContent(data)}
+          title="Hapus Artikel"
+        >
+          <TrashIcon className="size-4" />
+        </Button>
+      </div>
     ),
   }
   const dataOptions: Config = {
@@ -110,7 +128,7 @@ export const ContentsPage = () => {
           size="lg"
           className="text-md h-[42px] px-4"
         >
-          Buat Artikel
+          <PlusIcon className="size-8" /> Buat Artikel
         </Button>
       </div>
 
@@ -121,6 +139,15 @@ export const ContentsPage = () => {
         options={dataOptions}
         title="Daftar Artikel"
       />
+
+      <DialogDelete
+        selectedId={selectedContent?.id}
+        close={() => setSelectedContent(undefined)}
+        title="Artikel"
+        fetcherAction={`/actions/admin/contents/delete/${selectedContent?.id}`}
+      >
+        <p>{selectedContent?.title}</p>
+      </DialogDelete>
     </div>
   )
 }