TierList migration finished

components/tantable.tsx

@@ -4,9 +4,12 @@ import {
   type ColumnDef,
   flexRender,
   getCoreRowModel,
+  type RowSelectionState,
   useReactTable,
 } from "@tanstack/react-table";
-
+import { FolderCode, Plus } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
 import {
   Table,
   TableBody,
@@ -15,6 +18,16 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import { Button } from "./ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "./ui/empty";
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -24,15 +37,34 @@ interface DataTableProps<TData, TValue> {
 export function DataTable<TData, TValue>({
   columns,
   data,
-}: DataTableProps<TData, TValue>) {
+  className,
+  openCreateDialog,
+  emptyDescription,
+  rowSelection,
+  setRowSelection,
+}: DataTableProps<TData, TValue> & {
+  className?: string;
+  openCreateDialog?: () => void;
+  emptyDescription?: string;
+  rowSelection?: RowSelectionState;
+  setRowSelection?: (
+    state: RowSelectionState | ((old: RowSelectionState) => RowSelectionState),
+  ) => void;
+}) {
+  const [internalRowSelection, setInternalRowSelection] = useState({});
+
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
+    onRowSelectionChange: setRowSelection || setInternalRowSelection,
+    state: {
+      rowSelection: rowSelection || internalRowSelection,
+    },
   });
 
   return (
-    <div className="overflow-hidden rounded-md border">
+    <div className={cn("overflow-hidden rounded-md border", className)}>
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -67,9 +99,33 @@ export function DataTable<TData, TValue>({
               </TableRow>
             ))
           ) : (
-            <TableRow>
+            <TableRow className="hover:bg-transparent">
               <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
+                <Empty>
+                  <EmptyHeader>
+                    <EmptyMedia variant="icon">
+                      <FolderCode />
+                    </EmptyMedia>
+                    <EmptyTitle>Nothing Yet</EmptyTitle>
+                    <EmptyDescription>
+                      {emptyDescription ||
+                        "You haven't created any entries yet. Get started by creating your first entry."}
+                    </EmptyDescription>
+                  </EmptyHeader>
+                  <EmptyContent>
+                    <div className="flex gap-2">
+                      {openCreateDialog && (
+                        <Button onClick={openCreateDialog}>
+                          <Plus />
+                          Create
+                        </Button>
+                      )}
+                      <Link href="/admin">
+                        <Button variant="outline">Home</Button>
+                      </Link>
+                    </div>
+                  </EmptyContent>
+                </Empty>
               </TableCell>
             </TableRow>
           )}

components/ui/button.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";