diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx index 07e33d9085..27776ab77d 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx @@ -1,7 +1,7 @@ -import { Button, Flex, Icon, IconButton } from '@invoke-ai/ui-library'; +import { Button, Flex, IconButton, Spacer } from '@invoke-ai/ui-library'; import { ELLIPSIS, useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination'; import { useCallback } from 'react'; -import { PiCaretLeftBold, PiCaretRightBold, PiDotsThreeBold } from 'react-icons/pi'; +import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi'; import { JumpTo } from './JumpTo'; @@ -22,7 +22,7 @@ export const GalleryPagination = () => { } return ( - + { isDisabled={!isPrevEnabled} variant="ghost" /> - {pageButtons.map((page, i) => { - if (page === ELLIPSIS) { - return ; - } - return ( - - ); - })} + + {pageButtons.map((page, i) => ( + + ))} + { ); }; + +type PageButtonProps = { + page: number | typeof ELLIPSIS; + currentPage: number; + goToPage: (page: number) => void; +}; + +const PageButton = ({ page, currentPage, goToPage }: PageButtonProps) => { + if (page === ELLIPSIS) { + return ( + + ); + } + return ( + + ); +};