chore: initial commit

src/pages/blog/category/index.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { useQuery } from '@tanstack/react-query'
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table'
+
+import { getCategories } from '@/api'
+import { type Category } from '@/schemas'
+
+import { ActionDialogs } from './components/action-dialogs.tsx'
+import { CategoryTable } from './components/category-table.tsx'
+import { createColumns } from './components/columns.tsx'
+import { CrudProvider } from './components/crud-provider.tsx'
+import { QUERY_KEY } from './constants.ts'
+
+export default function CrudPage() {
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+  const [rowCount, setRowCount] = useState<number>()
+
+  const { data, isFetching } = useQuery({
+    queryKey: [QUERY_KEY, pagination.pageIndex, pagination.pageSize],
+    queryFn: () =>
+      getCategories({
+        page: pagination.pageIndex + 1,
+        page_size: pagination.pageSize,
+      }),
+    placeholderData: (prev) => prev,
+  })
+
+  const tableData = useMemo<Category[]>(() => data?.list ?? [], [data])
+
+  const columns = useMemo(() => createColumns(), [])
+
+  useEffect(() => {
+    if (!isFetching && data?.total !== undefined) {
+      setRowCount(data.total)
+    }
+  }, [isFetching, data?.total])
+
+  const table = useReactTable<Category>({
+    data: tableData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    rowCount: rowCount,
+    state: { pagination },
+    onPaginationChange: setPagination,
+    meta: {
+      showLoading: isFetching,
+    },
+  })
+
+  return (
+    <CrudProvider>
+      <ActionDialogs />
+
+      <CategoryTable table={table} />
+    </CrudProvider>
+  )
+}