💄 (paginatorComponent): update button styles to include fixed height and width

✨ (paginatorComponent): add size prop to buttons for consistent styling
This commit is contained in:
cristhianzl 2024-06-23 17:58:46 -03:00 • committed by Gabriel Luiz Freitas Almeida
commit d4080b81f9

View file

@ -68,10 +68,11 @@ export default function PaginatorComponent({
<Button <Button
disabled={pageIndex <= 1} disabled={pageIndex <= 1}
variant="outline" variant="outline"
className="hidden p-0 lg:flex" className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => { onClick={() => {
paginate(size, 1); paginate(size, 1);
}} }}
size={"icon"}
> >
<span className="sr-only">Go to first page</span> <span className="sr-only">Go to first page</span>
<IconComponent name="ChevronsLeft" className="h-4 w-4" /> <IconComponent name="ChevronsLeft" className="h-4 w-4" />
@ -84,7 +85,8 @@ export default function PaginatorComponent({
} }
}} }}
variant="outline" variant="outline"
className="p-0" className="h-8 w-8 p-0"
size={"icon"}
> >
<span className="sr-only">Go to previous page</span> <span className="sr-only">Go to previous page</span>
<IconComponent name="ChevronLeft" className="h-4 w-4" /> <IconComponent name="ChevronLeft" className="h-4 w-4" />
@ -95,7 +97,8 @@ export default function PaginatorComponent({
paginate(size, pageIndex + 1); paginate(size, pageIndex + 1);
}} }}
variant="outline" variant="outline"
className="p-0" className="h-8 w-8 p-0"
size={"icon"}
> >
<span className="sr-only">Go to next page</span> <span className="sr-only">Go to next page</span>
<IconComponent name="ChevronRight" className="h-4 w-4" /> <IconComponent name="ChevronRight" className="h-4 w-4" />
@ -103,7 +106,8 @@ export default function PaginatorComponent({
<Button <Button
disabled={pageIndex === maxIndex} disabled={pageIndex === maxIndex}
variant="outline" variant="outline"
className="hidden p-0 lg:flex" className="hidden h-8 w-8 p-0 lg:flex"
size={"icon"}
onClick={() => { onClick={() => {
paginate(size, maxIndex); paginate(size, maxIndex);
}} }}