1import {
 2    ChevronLeftIcon,
 3    ChevronRightIcon,
 4    DoubleArrowLeftIcon,
 5    DoubleArrowRightIcon,
 6} from "@radix-ui/react-icons"
 7import { Table } from "@tanstack/react-table"
 8
 9import {
10    Button,
11    Select,
12    SelectContent,
13    SelectItem,
14    SelectTrigger,
15    SelectValue,
16} from "@marzneshin/components"
17import { useTranslation } from "react-i18next"
18
19interface DataTablePaginationProps<TData> {
20    table: Table<TData>
21}
22
23export function DataTablePagination<TData>({
24    table,
25}: DataTablePaginationProps<TData>) {
26    const { t } = useTranslation();
27    return (
28        <div className="flex justify-between items-center p-2">
29            <div className="flex-1 text-sm text-muted-foreground">
30                {table.getFilteredSelectedRowModel().rows.length} {"/"}
31                {table.getFilteredRowModel().rows.length} {t('table.selected')}
32            </div>
33            <div className="flex items-center space-x-6 lg:space-x-8">
34                <div className="flex items-center space-x-2">
35                    <p className="text-sm font-medium">{t('table.row-per-page')}</p>
36                    <Select
37                        value={`${table.getState().pagination.pageSize}`}
38                        onValueChange={(value) => {
39                            table.setPageSize(Number(value))
40                        }}
41                    >
42                        <SelectTrigger className="h-8 w-[70px]">
43                            <SelectValue placeholder={table.getState().pagination.pageSize} />
44                        </SelectTrigger>
45                        <SelectContent side="top">
46                            {[10, 20, 30, 40, 50].map((pageSize) => (
47                                <SelectItem key={pageSize} value={`${pageSize}`}>
48                                    {pageSize}
49                                </SelectItem>
50                            ))}
51                        </SelectContent>
52                    </Select>
53                </div>
54                <div className="flex justify-center items-center text-sm font-medium w-[100px]">
55                    Page {table.getState().pagination.pageIndex + 1} of{" "}
56                    {table.getPageCount()}
57                </div>
58                <div className="flex items-center space-x-2">
59                    <Button
60                        variant="outline"
61                        className="hidden p-0 w-8 h-8 lg:flex"
62                        onClick={() => table.setPageIndex(0)}
63                        disabled={!table.getCanPreviousPage()}
64                    >
65                        <span className="sr-only">Go to first page</span>
66                        <DoubleArrowLeftIcon className="w-4 h-4" />
67                    </Button>
68                    <Button
69                        variant="outline"
70                        className="p-0 w-8 h-8"
71                        onClick={() => table.previousPage()}
72                        disabled={!table.getCanPreviousPage()}
73                    >
74                        <span className="sr-only">Go to previous page</span>
75                        <ChevronLeftIcon className="w-4 h-4" />
76                    </Button>
77                    <Button
78                        variant="outline"
79                        className="p-0 w-8 h-8"
80                        onClick={() => table.nextPage()}
81                        disabled={!table.getCanNextPage()}
82                    >
83                        <span className="sr-only">Go to next page</span>
84                        <ChevronRightIcon className="w-4 h-4" />
85                    </Button>
86                    <Button
87                        variant="outline"
88                        className="hidden p-0 w-8 h-8 lg:flex"
89                        onClick={() => table.setPageIndex(table.getPageCount() - 1)}
90                        disabled={!table.getCanNextPage()}
91                    >
92                        <span className="sr-only">Go to last page</span>
93                        <DoubleArrowRightIcon className="w-4 h-4" />
94                    </Button>
95                </div>
96            </div>
97        </div>
98    )
99}