feat: enhance table styling in ContentsPage with additional class names for better readability

app/pages/dashboard-contents/index.tsx

@@ -48,12 +48,13 @@ export const ContentsPage = () => {
       title: 'Penulis',
       data: 'author',
     },
-    { title: 'Judul', data: 'title' },
+    { title: 'Judul', data: 'title', className: 'text-sm' },
     {
       title: 'Kategori',
       data: 'categories',
+      className: 'text-xs',
     },
-    { title: 'Tag', data: 'tags' },
+    { title: 'Tag', data: 'tags', className: 'text-xs' },
     {
       title: 'Subscription',
       data: 'is_premium',
@@ -66,18 +67,14 @@ export const ContentsPage = () => {
   const dataSlot: DataTableSlots = {
     1: (value: string) => formatDate(value),
     2: (value: TAuthorResponse) => (
-      <div>
+      <>
         <div>{value.name}</div>
         <div className="text-sm text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
-      </div>
+      </>
-    ),
-    3: (value: string) => <span className="text-sm">{value}</span>,
-    4: (value: TCategoryResponse[]) => (
-      <div className="text-xs">{value.map((item) => item.name).join(', ')}</div>
-    ),
-    5: (value: TTagResponse[]) => (
-      <div className="text-xs">{value.map((item) => item.name).join(', ')}</div>
     ),
+    4: (value: TCategoryResponse[]) =>
+      value.map((item) => item.name).join(', '),
+    5: (value: TTagResponse[]) => value.map((item) => item.name).join(', '),
     6: (value: string) =>
       value ? (
         <div className="rounded-full bg-[#FFFCAF] px-2 text-center text-[#DBCA6E]">