completed Account Log

apps/hub/app/_components/PaginatedTable.tsx

@@ -21,6 +21,7 @@ interface PaginatedTableProps<TData, TWhere extends object>
 	leftOfSearch?: React.ReactNode;
 	rightOfSearch?: React.ReactNode;
 	leftOfPagination?: React.ReactNode;
+	rightOfPagination?: React.ReactNode;
 	supressQuery?: boolean;
 	ref?: Ref<PaginatedTableRef>;
 }
@@ -37,6 +38,7 @@ export function PaginatedTable<TData, TWhere extends object>({
 	leftOfSearch,
 	rightOfSearch,
 	leftOfPagination,
+	rightOfPagination,
 	supressQuery,
 	...restProps
 }: PaginatedTableProps<TData, TWhere>) {
@@ -159,10 +161,9 @@ export function PaginatedTable<TData, TWhere extends object>({
 			<SortableTable data={data} prismaModel={prismaModel} setOrderBy={setOrderBy} {...restProps} />
 			<div className="items-between flex">
 				{leftOfPagination}
-				<>
-					<RowsPerPage rowsPerPage={rowsPerPage} setRowsPerPage={setRowsPerPage} />
-					<Pagination totalPages={Math.ceil(total / rowsPerPage)} page={page} setPage={setPage} />
-				</>
+				<RowsPerPage rowsPerPage={rowsPerPage} setRowsPerPage={setRowsPerPage} />
+				{rightOfPagination}
+				<Pagination totalPages={Math.ceil(total / rowsPerPage)} page={page} setPage={setPage} />
 			</div>
 		</div>
 	);

apps/hub/app/_components/Table.tsx

@@ -95,7 +95,7 @@ export const RowsPerPage = ({
 }) => {
 	return (
 		<select
-			className="select w-32"
+			className="select select-sm w-32"
 			value={rowsPerPage}
 			onChange={(e) => setRowsPerPage(Number(e.target.value))}
 		>
@@ -122,11 +122,15 @@ export const Pagination = ({
 	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
+				className="join-item btn btn-sm"
+				disabled={page === 0}
+				onClick={() => setPage(page - 1)}
+			>
+				<ArrowLeft size={14} />
 			</button>
 			<select
-				className="select join-item w-16"
+				className="select select-sm join-item w-16"
 				value={page}
 				onChange={(e) => setPage(Number(e.target.value))}
 			>
@@ -137,11 +141,11 @@ export const Pagination = ({
 				))}
 			</select>
 			<button
-				className="join-item btn"
+				className="join-item btn btn-sm"
 				disabled={page === totalPages - 1}
 				onClick={() => page < totalPages && setPage(page + 1)}
 			>
-				<ArrowRight size={16} />
+				<ArrowRight size={14} />
 			</button>
 		</div>
 	);