🎉 chore(init): project initialization

2024-11-14 01:22:43 +07:00
commit 829edfa824
479 changed files with 61413 additions and 0 deletions
@@ -0,0 +1,102 @@
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon,
+} from '@radix-ui/react-icons';
+import { Button } from '@shadcn/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@shadcn/ui/select';
+import { Table } from '@tanstack/react-table';
+
+interface PaginationText {
+  textRowsPerPage?: string;
+  textPageOf?: (pageIndex: number, pageCount: number) => string;
+}
+interface PaginationProps<TData> {
+  table: Table<TData>;
+  text?: PaginationText;
+}
+
+export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
+  return (
+    <div className='flex flex-col items-center justify-between gap-2 sm:flex-row'>
+      <div className='text-muted-foreground flex-1 whitespace-nowrap text-center text-sm sm:text-left'>
+        {text?.textPageOf?.(table.getState().pagination.pageIndex + 1, table.getPageCount()) ||
+          `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`}
+      </div>
+      <div className='m-auto flex items-center gap-2'>
+        <div className='flex items-center space-x-2'>
+          <p className='font-medium'>{text?.textRowsPerPage || 'Rows per page'}</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+          >
+            <SelectTrigger className='h-8 w-[70px]'>
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side='top'>
+              {[10, 20, 50, 100, 200].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <Button
+          variant='outline'
+          className='hidden h-8 w-8 p-2 lg:flex'
+          onClick={() => table.setPageIndex(0)}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <span className='sr-only'>Go to first page</span>
+          <DoubleArrowLeftIcon className='h-4 w-4' />
+        </Button>
+        <Button
+          variant='outline'
+          className='h-8 w-8 p-2'
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <span className='sr-only'>Go to previous page</span>
+          <ChevronLeftIcon className='h-4 w-4' />
+        </Button>
+        <Select
+          value={`${table.getState().pagination.pageIndex + 1}`}
+          onValueChange={(value) => table.setPageIndex(Number(value) - 1)}
+        >
+          <SelectTrigger className='h-8 w-[70px]'>
+            <SelectValue placeholder='Select page number' />
+          </SelectTrigger>
+          <SelectContent className='w-12'>
+            {Array.from({ length: table.getPageCount() }, (_, i) => (
+              <SelectItem key={i} value={`${i + 1}`}>
+                {i + 1}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          variant='outline'
+          className='h-8 w-8 p-2'
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          <span className='sr-only'>Go to next page</span>
+          <ChevronRightIcon className='h-4 w-4' />
+        </Button>
+        <Button
+          variant='outline'
+          className='hidden h-8 w-8 p-2 lg:flex'
+          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+          disabled={!table.getCanNextPage()}
+        >
+          <span className='sr-only'>Go to last page</span>
+          <DoubleArrowRightIcon className='h-4 w-4' />
+        </Button>
+      </div>
+    </div>
+  );
+}