diff --git a/examples/algolia/src/components/pagination/Pagination.tsx b/examples/algolia/src/components/pagination/Pagination.tsx index b994961a..3e6fbc8a 100644 --- a/examples/algolia/src/components/pagination/Pagination.tsx +++ b/examples/algolia/src/components/pagination/Pagination.tsx @@ -53,7 +53,7 @@ const PaginationLink = ({ aria-current={isActive ? "page" : undefined} className={cn( buttonVariants({ - variant: "link", + variant: isActive ? "primary" : "secondary", size, }), className, @@ -64,6 +64,30 @@ const PaginationLink = ({ ); PaginationLink.displayName = "PaginationLink"; +type PaginationButtonProps = { + isActive?: boolean; +} & ButtonProps; + +const PaginationButton = ({ + className, + isActive, + size = "small", + ...props +}: PaginationButtonProps) => ( + +); +PaginationButton.displayName = "PaginationButton"; + const PaginationPrevious = ({ className, ...props @@ -117,4 +141,5 @@ export { PaginationLink, PaginationNext, PaginationPrevious, + PaginationButton, }; diff --git a/examples/algolia/src/components/search/Pagination.tsx b/examples/algolia/src/components/search/Pagination.tsx index 142fe1ac..2fe9aefe 100644 --- a/examples/algolia/src/components/search/Pagination.tsx +++ b/examples/algolia/src/components/search/Pagination.tsx @@ -1,29 +1,31 @@ import React from "react"; import { usePagination } from "react-instantsearch"; -import clsx from "clsx"; + +import { + Pagination as DisplayPagination, + PaginationButton, + PaginationContent, + PaginationItem, +} from "../pagination/Pagination"; export const Pagination = (): JSX.Element => { const { pages, currentRefinement, canRefine, refine } = usePagination(); - return ( -