update select

apps/admin.saladeaula.digital/app/components/data-table/pagination.tsx

@@ -1,5 +1,5 @@
 import { type Table } from '@tanstack/react-table'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
 
 import { Button } from '@repo/ui/components/ui/button'
 import {
@@ -21,63 +21,54 @@ export function DataTablePagination<TData>({
   const rowCount = table.getRowCount()
 
   return (
-    <div className="flex items-center">
-      <div className="text-muted-foreground flex-1 text-sm">
-        {table.getFilteredSelectedRowModel().rows.length} de{' '}
-        {table.getFilteredRowModel().rows.length} linha(s) selecionada(s).
+    <div className="flex items-center justify-end gap-3 lg:gap-6">
+      <div className="flex items-center gap-2">
+        <p className="text-sm font-medium hidden lg:block">Itens por página</p>
+        <Select
+          value={String(table.getState().pagination.pageSize)}
+          onValueChange={(value) => {
+            table.setPageSize(Number(value))
+          }}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder={table.getState().pagination.pageSize} />
+          </SelectTrigger>
+          <SelectContent side="top">
+            {[12, 25, 50, 100].map((pageSize) => (
+              <SelectItem key={pageSize} value={String(pageSize)}>
+                {pageSize}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
 
-      <div className="flex items-center gap-3 lg:gap-6">
-        <div className="flex items-center space-x-2">
-          <p className="text-sm font-medium hidden lg:block">
-            Itens por página
-          </p>
-          <Select
-            value={`${table.getState().pagination.pageSize}`}
-            onValueChange={(value) => {
-              table.setPageSize(Number(value))
-            }}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder={table.getState().pagination.pageSize} />
-            </SelectTrigger>
-            <SelectContent side="top">
-              {[12, 25, 50, 100].map((pageSize) => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
-                  {pageSize}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
+      <div className="text-sm font-medium">
+        {(pageIndex + 1) * pageSize - pageSize + 1}-
+        {Math.min((pageIndex + 1) * pageSize, rowCount)}
+      </div>
 
-        <div className="text-sm font-medium">
-          {(pageIndex + 1) * pageSize - pageSize + 1}-
-          {Math.min((pageIndex + 1) * pageSize, rowCount)}
-        </div>
-
-        <div className="flex items-center gap-2 *:cursor-pointer">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-8"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <span className="sr-only">Ir para a página anterior</span>
-            <ChevronLeft />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-8"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Ir para a próxima página</span>
-            <ChevronRight />
-          </Button>
-        </div>
+      <div className="flex items-center gap-2 *:cursor-pointer">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <span className="sr-only">Ir para a página anterior</span>
+          <ChevronLeftIcon />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          <span className="sr-only">Ir para a próxima página</span>
+          <ChevronRightIcon />
+        </Button>
       </div>
     </div>
   )