test new layout

src/app/admin/layout.tsx

@@ -1,7 +1,5 @@
 import { Metadata } from "next";
-import { TopbarNav } from "@app/components/TopbarNav";
 import { Users } from "lucide-react";
-import { Header } from "@app/components/Header";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { redirect } from "next/navigation";
 import { cache } from "react";
@@ -10,6 +8,7 @@ import { ListOrgsResponse } from "@server/routers/org";
 import { internal } from "@app/lib/api";
 import { AxiosResponse } from "axios";
 import { authCookieHeader } from "@app/lib/api/cookies";
+import { Layout } from "@app/components/Layout";
 
 export const dynamic = "force-dynamic";
 
@@ -18,7 +17,7 @@ export const metadata: Metadata = {
     description: ""
 };
 
-const topNavItems = [
+const navItems = [
     {
         title: "All Users",
         href: "/admin/users",
@@ -30,7 +29,7 @@ interface LayoutProps {
     children: React.ReactNode;
 }
 
-export default async function SettingsLayout(props: LayoutProps) {
+export default async function AdminLayout(props: LayoutProps) {
     const getUser = cache(verifySession);
     const user = await getUser();
 
@@ -51,21 +50,10 @@ export default async function SettingsLayout(props: LayoutProps) {
     } catch (e) {}
 
     return (
-        <>
-            <div className="w-full bg-card sm:px-0 fixed top-0 z-10 border-b">
-                <div className="container mx-auto flex flex-col content-between">
-                    <div className="my-4 px-3 md:px-0">
-                        <UserProvider user={user}>
-                            <Header orgId={""} orgs={orgs} />
-                        </UserProvider>
-                    </div>
-                    <TopbarNav items={topNavItems} />
-                </div>
-            </div>
-
-            <div className="container mx-auto sm:px-0 px-3 pt-[155px]">
+        <UserProvider user={user}>
+            <Layout orgs={orgs} navItems={navItems}>
                 {props.children}
-            </div>
-        </>
+            </Layout>
+        </UserProvider>
     );
 }

src/app/admin/users/AdminUsersDataTable.tsx

@@ -2,29 +2,8 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
-
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableHead,
-    TableHeader,
-    TableRow
-} from "@/components/ui/table";
-import { useState } from "react";
-import { Input } from "@app/components/ui/input";
-import { DataTablePagination } from "@app/components/DataTablePagination";
-import { Search } from "lucide-react";
+import { DataTable } from "@app/components/ui/data-table";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -35,107 +14,13 @@ export function UsersDataTable<TData, TValue>({
     columns,
     data
 }: DataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        getFilteredRowModel: getFilteredRowModel(),
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        },
-        state: {
-            sorting,
-            columnFilters
-        }
-    });
-
     return (
-        <div>
-            <div className="flex items-center justify-between pb-4">
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
-                    <Input
-                        placeholder="Search server users"
-                        value={
-                            (table
-                                .getColumn("email")
-                                ?.getFilterValue() as string) ?? ""
-                        }
-                        onChange={(event) =>
-                            table
-                                .getColumn("name")
-                                ?.setFilterValue(event.target.value)
-                        }
-                        className="w-full pl-8"
-                    />
-                    <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
-                </div>
-            </div>
-            <TableContainer>
-                <Table>
-                    <TableHeader>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map((header) => {
-                                    return (
-                                        <TableHead key={header.id}>
-                                            {header.isPlaceholder
-                                                ? null
-                                                : flexRender(
-                                                      header.column.columnDef
-                                                          .header,
-                                                      header.getContext()
-                                                  )}
-                                        </TableHead>
-                                    );
-                                })}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
-                    <TableBody>
-                        {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-24 text-center"
-                                >
-                                    This server has no users.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
+        <DataTable
+            columns={columns}
+            data={data}
+            title="Server Users"
+            searchPlaceholder="Search server users..."
+            searchColumn="email"
+        />
     );
 }