refactor: refactor the color schema

src/components/data-table/index.tsx

@@ -0,0 +1,186 @@
+"use client";
+import React from "react";
+import {
+  ColumnDef,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  getSortedRowModel,
+  getPaginationRowModel,
+} from "@tanstack/react-table";
+
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Edit2, Trash2 } from "lucide-react";
+
+import TopHeader from "./Header";
+import TableHeader from "./TableHeader";
+import { TableFooter } from "./Footer";
+import { cn } from "@/lib/utils";
+
+export interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  title?: string;
+  onAddNew?: () => void;
+  addButtonText?: string;
+  isLoading?: boolean;
+  onEdit?: (item: TData) => void;
+  onDelete?: (item: TData) => void;
+  pagination?: {
+    skip: number;
+    limit: number;
+    totalItems?: number;
+    onPageChange: (newSkip: number) => void;
+    onLimitChange: (newLimit: number) => void;
+  };
+}
+
+export function DataTable<TData, TValue>({
+  columns: initialColumns,
+  data,
+  title,
+  onAddNew,
+  addButtonText,
+  isLoading = false,
+  onEdit,
+  onDelete,
+  pagination,
+}: DataTableProps<TData, TValue>) {
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+
+  const columns = React.useMemo(() => {
+    const cols = [...initialColumns];
+    if (onEdit || onDelete) {
+      cols.push({
+        id: "actions",
+        header: () => <div className="text-right">Actions</div>,
+        cell: ({ row }) => {
+          const item = row.original;
+          return (
+            <div className="flex justify-end gap-2">
+              {onEdit && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => onEdit(item)}
+                  className="h-8 w-8"
+                >
+                  <Edit2 className="h-4 w-4" />
+                </Button>
+              )}
+              {onDelete && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => onDelete(item)}
+                  className="h-8 w-8 text-destructive hover:text-destructive"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+          );
+        },
+      });
+    }
+    return cols;
+  }, [initialColumns, onEdit, onDelete]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    manualPagination: !!pagination,
+    pageCount: pagination?.totalItems ? Math.ceil(pagination.totalItems / pagination.limit) : -1,
+    state: {
+      rowSelection,
+      sorting,
+      pagination: pagination ? {
+        pageIndex: Math.floor(pagination.skip / pagination.limit),
+        pageSize: pagination.limit,
+      } : undefined,
+    },
+    onPaginationChange: (updater) => {
+        if (typeof updater === 'function' && pagination) {
+            const newState = updater({
+                pageIndex: Math.floor(pagination.skip / pagination.limit),
+                pageSize: pagination.limit,
+            });
+            pagination.onLimitChange(newState.pageSize);
+            pagination.onPageChange(newState.pageIndex * newState.pageSize);
+        }
+    },
+    initialState: {
+      pagination: {
+        pageSize: 10,
+        pageIndex: 0,
+      },
+    },
+  });
+
+  return (
+    <div className="rounded-md border">
+      <TopHeader 
+        title={title} 
+        itemCount={data.length} 
+        onAddNew={onAddNew} 
+        addButtonText={addButtonText} 
+      />
+
+      <div className="relative">
+        <Table>
+          <TableHeader table={table} />
+          <TableBody className="bg-transparent">
+            {isLoading ? (
+                Array.from({ length: 5 }).map((_, idx) => (
+                    <TableRow key={idx}>
+                        {columns.map((_, colIdx) => (
+                            <TableCell key={colIdx} className="px-8 py-4">
+                                <Skeleton className="h-4 w-full max-w-[120px]" />
+                            </TableCell>
+                        ))}
+                    </TableRow>
+                ))
+            ) : table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-32 text-center text-sm"
+                >
+                  No results found.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      
+      <TableFooter table={table} />
+    </div>
+  );
+}