infoalloggi-monorepo/apps/infoalloggi/src/components/custom_ui/dataTable-pagination.tsx

import type { Table } from "@tanstack/react-table";
import {
	ChevronFirst,
	ChevronLast,
	ChevronLeftIcon,
	ChevronRightIcon,
} from "lucide-react";
import { Button } from "~/components/ui/button";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "~/components/ui/select";

interface DataTablePaginationProps<TData> {
	table: Table<TData>;
	hasSelectRow?: boolean;
}

export function DataTablePagination<TData>({
	table,
	hasSelectRow,
}: DataTablePaginationProps<TData>) {
	return (
		<div className="flex items-center justify-between px-2">
			<div className="flex-1 text-muted-foreground text-sm">
				{hasSelectRow &&
					`${table.getFilteredSelectedRowModel().rows.length} selezioni su `}
				{table.getFilteredRowModel().rows.length} righe totali
			</div>

			<div className="flex flex-wrap items-center gap-x-6 gap-y-2 lg:gap-x-8">
				<div className="flex items-center space-x-2">
					<p className="font-medium text-sm">Righe per pagina</p>
					<Select
						onValueChange={(value) => {
							table.setPageSize(Number(value));
						}}
						value={`${table.getState().pagination.pageSize}`}
					>
						<SelectTrigger className="h-8 w-[70px]">
							<SelectValue placeholder={table.getState().pagination.pageSize} />
						</SelectTrigger>
						<SelectContent side="top">
							{[10, 20, 30, 40, 50].map((pageSize) => (
								<SelectItem key={pageSize} value={`${pageSize}`}>
									{pageSize}
								</SelectItem>
							))}
						</SelectContent>
					</Select>
				</div>
				<div className="flex items-center gap-x-6 lg:gap-x-8">
					<div className="flex items-center justify-between font-medium text-sm">
						Pagina {table.getState().pagination.pageIndex + 1} di{" "}
						{table.getPageCount()}
					</div>
					<div className="flex items-center space-x-2">
						<Button
							className="hidden size-8 p-0 lg:flex"
							disabled={!table.getCanPreviousPage()}
							onClick={() => table.setPageIndex(0)}
							variant="outline"
						>
							<span className="sr-only">Vai alla prima pagina</span>
							<ChevronFirst className="size-4" />
						</Button>
						<Button
							className="size-8 p-0"
							disabled={!table.getCanPreviousPage()}
							onClick={() => table.previousPage()}
							variant="outline"
						>
							<span className="sr-only">Vai alla pagina precedente</span>
							<ChevronLeftIcon className="size-4" />
						</Button>
						<Button
							className="size-8 p-0"
							disabled={!table.getCanNextPage()}
							onClick={() => table.nextPage()}
							variant="outline"
						>
							<span className="sr-only">Vai alla pagina successiva</span>
							<ChevronRightIcon className="size-4" />
						</Button>
						<Button
							className="hidden size-8 p-0 lg:flex"
							disabled={!table.getCanNextPage()}
							onClick={() => table.setPageIndex(table.getPageCount() - 1)}
							variant="outline"
						>
							<span className="sr-only">Vai alla pagina finale</span>
							<ChevronLast className="size-4" />
						</Button>
					</div>
				</div>
			</div>
		</div>
	);
}