PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

formated project with prettier

Browse Source
This commit is contained in:
PxlLoewe
2025-02-25 00:45:36 +01:00
parent c5b8a7c4cb
commit 22606b2137
95 changed files with 17771 additions and 17068 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
apps/hub/app/_components/Table.tsx
View File

@@ -1,138 +1,138 @@
'use client';
import { useState } from 'react';
"use client";
import { useState } from "react";
import {
useReactTable,
getCoreRowModel,
getSortedRowModel,
ColumnDef,
SortingState,
flexRender,
} from '@tanstack/react-table';
import { ArrowLeft, ArrowRight, ChevronDown, ChevronUp } from 'lucide-react'; // Icons for sorting
import Link from 'next/link';
import { PrismaClient } from '@repo/db';
useReactTable,
getCoreRowModel,
getSortedRowModel,
ColumnDef,
SortingState,
flexRender,
} from "@tanstack/react-table";
import { ArrowLeft, ArrowRight, ChevronDown, ChevronUp } from "lucide-react"; // Icons for sorting
import Link from "next/link";
import { PrismaClient } from "@repo/db";
export interface SortableTableProps<TData> {
data: TData[];
columns: ColumnDef<TData>[];
showEditButton?: boolean;
prismaModel?: keyof PrismaClient;
data: TData[];
columns: ColumnDef<TData>[];
showEditButton?: boolean;
prismaModel?: keyof PrismaClient;
}
export default function SortableTable<TData>({
data,
columns,
prismaModel,
showEditButton,
data,
columns,
prismaModel,
showEditButton,
}: SortableTableProps<TData>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [sorting, setSorting] = useState<SortingState>([]);
const table = useReactTable({
data,
columns: showEditButton
? [
...columns,
{
header: 'Actions',
cell: ({ row }) => (
<div className="flex items-center gap-1">
<Link
href={`/admin/${prismaModel as string}/${(row.original as any).id}`}
>
<button className="btn btn-sm">Edit</button>
</Link>
</div>
),
},
]
: columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
onSortingChange: setSorting,
state: { sorting },
});
const table = useReactTable({
data,
columns: showEditButton
? [
...columns,
{
header: "Actions",
cell: ({ row }) => (
<div className="flex items-center gap-1">
<Link
href={`/admin/${prismaModel as string}/${(row.original as any).id}`}
>
<button className="btn btn-sm">Edit</button>
</Link>
</div>
),
},
]
: columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
onSortingChange: setSorting,
state: { sorting },
});
return (
<div className="overflow-x-auto">
<table className="table table-zebra w-full">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
key={header.id}
onClick={header.column.getToggleSortingHandler()}
>
<div className="flex items-center gap-1 cursor-pointer">
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{header.column.getIsSorted() === 'asc' && (
<ChevronUp size={16} />
)}
{header.column.getIsSorted() === 'desc' && (
<ChevronDown size={16} />
)}
</div>
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
return (
<div className="overflow-x-auto">
<table className="table table-zebra w-full">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
key={header.id}
onClick={header.column.getToggleSortingHandler()}
>
<div className="flex items-center gap-1 cursor-pointer">
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
{header.column.getIsSorted() === "asc" && (
<ChevronUp size={16} />
)}
{header.column.getIsSorted() === "desc" && (
<ChevronDown size={16} />
)}
</div>
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
}
export const Pagination = ({
page,
totalPages,
setPage,
page,
totalPages,
setPage,
}: {
page: number;
totalPages: number;
setPage: (page: number) => void;
page: number;
totalPages: number;
setPage: (page: number) => void;
}) => {
if (totalPages === 0) return null;
return (
<div className="join w-full justify-end">
<button
className="join-item btn"
disabled={page === 0}
onClick={() => setPage(page - 1)}
>
<ArrowLeft size={16} />
</button>
<select
className="select join-item w-16"
value={page}
onChange={(e) => setPage(Number(e.target.value))}
>
{Array.from({ length: totalPages }).map((_, i) => (
<option key={i} value={i}>
{i + 1}
</option>
))}
</select>
<button
className="join-item btn"
disabled={page === totalPages - 1}
onClick={() => page < totalPages && setPage(page + 1)}
>
<ArrowRight size={16} />
</button>
</div>
);
if (totalPages === 0) return null;
return (
<div className="join w-full justify-end">
<button
className="join-item btn"
disabled={page === 0}
onClick={() => setPage(page - 1)}
>
<ArrowLeft size={16} />
</button>
<select
className="select join-item w-16"
value={page}
onChange={(e) => setPage(Number(e.target.value))}
>
{Array.from({ length: totalPages }).map((_, i) => (
<option key={i} value={i}>
{i + 1}
</option>
))}
</select>
<button
className="join-item btn"
disabled={page === totalPages - 1}
onClick={() => page < totalPages && setPage(page + 1)}
>
<ArrowRight size={16} />
</button>
</div>
);
};