Skip to content

Commit

Permalink
feat: use pagination component for simple output
Browse files Browse the repository at this point in the history
  • Loading branch information
field123 committed Feb 15, 2024
1 parent cc01d4a commit 1c24cf2
Show file tree
Hide file tree
Showing 11 changed files with 172 additions and 104 deletions.
27 changes: 26 additions & 1 deletion examples/algolia/src/components/pagination/Pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const PaginationLink = ({
aria-current={isActive ? "page" : undefined}
className={cn(
buttonVariants({
variant: "link",
variant: isActive ? "primary" : "secondary",
size,
}),
className,
Expand All @@ -64,6 +64,30 @@ const PaginationLink = ({
);
PaginationLink.displayName = "PaginationLink";

type PaginationButtonProps = {
isActive?: boolean;
} & ButtonProps;

const PaginationButton = ({
className,
isActive,
size = "small",
...props
}: PaginationButtonProps) => (
<button
aria-current={isActive ? "page" : undefined}
className={cn(
buttonVariants({
variant: isActive ? "primary" : "secondary",
size,
}),
className,
)}
{...props}
/>
);
PaginationButton.displayName = "PaginationButton";

const PaginationPrevious = ({
className,
...props
Expand Down Expand Up @@ -117,4 +141,5 @@ export {
PaginationLink,
PaginationNext,
PaginationPrevious,
PaginationButton,
};
40 changes: 21 additions & 19 deletions examples/algolia/src/components/search/Pagination.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className={clsx(canRefine ? "block" : "none")}>
<div className="flex justify-center">
{pages.map((page) => (
<button
className={clsx(
currentRefinement === page ? "bg-brand-primary" : "bg-gray-100",
currentRefinement === page ? "text-white" : "text-black",
"flex w-full items-center justify-center rounded-md bg-brand-primary px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-brand-highlight w-fit cursor-pointer",
)}
key={page}
onClick={() => refine(page)}
disabled={!canRefine}
>
{page + 1}
</button>
<DisplayPagination>
<PaginationContent>
{pages.map((pageNumber) => (
<PaginationItem key={pageNumber}>
<PaginationButton
isActive={currentRefinement === pageNumber}
onClick={() => refine(pageNumber)}
disabled={!canRefine}
>
{pageNumber + 1}
</PaginationButton>
</PaginationItem>
))}
</div>
</div>
</PaginationContent>
</DisplayPagination>
);
};

Expand Down
2 changes: 1 addition & 1 deletion examples/algolia/src/components/search/SearchResults.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export default function SearchResults({ lookup }: ISearchResults): JSX.Element {
</div>
</div>
<hr />
<div className="grid grid-cols-[auto_auto_auto] gap-8">
<div className="grid grid-cols-[auto_1fr] gap-8">
<div className="hidden w-[14rem] md:block lg:w-[16rem]">
<h3 className="font-semibold">Category</h3>
{nav && <NodeMenu nav={nav} />}
Expand Down
27 changes: 26 additions & 1 deletion examples/payments/src/components/pagination/Pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const PaginationLink = ({
aria-current={isActive ? "page" : undefined}
className={cn(
buttonVariants({
variant: "link",
variant: isActive ? "primary" : "secondary",
size,
}),
className,
Expand All @@ -64,6 +64,30 @@ const PaginationLink = ({
);
PaginationLink.displayName = "PaginationLink";

type PaginationButtonProps = {
isActive?: boolean;
} & ButtonProps;

const PaginationButton = ({
className,
isActive,
size = "small",
...props
}: PaginationButtonProps) => (
<button
aria-current={isActive ? "page" : undefined}
className={cn(
buttonVariants({
variant: isActive ? "primary" : "secondary",
size,
}),
className,
)}
{...props}
/>
);
PaginationButton.displayName = "PaginationButton";

const PaginationPrevious = ({
className,
...props
Expand Down Expand Up @@ -117,4 +141,5 @@ export {
PaginationLink,
PaginationNext,
PaginationPrevious,
PaginationButton,
};
49 changes: 23 additions & 26 deletions examples/payments/src/components/search/Pagination.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import React from "react";
import { useProducts } from "./ProductsProvider";
import clsx from "clsx";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
Pagination as DisplayPagination,
PaginationContent,
PaginationItem, PaginationLink,
} from "../pagination/Pagination";


function calculateTotalPages(totalItems: number, limit: number): number {
// Ensure both totalItems and limit are positive integers
Expand Down Expand Up @@ -30,30 +34,23 @@ export const Pagination = (): JSX.Element => {
const totalPages = calculateTotalPages(totalResults, page.meta.page.limit);

return (
<div className={clsx("block")}>
<div className="flex justify-center gap-2 flex-wrap">
{[...Array(totalPages).keys()].map((currentPage) => (
<Link
href={`${pathname}?limit=${page.meta.page.limit}&offset=${
currentPage * page.meta.page.limit
}`}
className={clsx(
currentPage + 1 === page.meta.page.current
? "bg-brand-primary"
: "bg-gray-100",
currentPage + 1 === page.meta.page.current
? "text-white"
: "text-black",
"flex w-full items-center justify-center rounded-md bg-brand-primary px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-brand-highlight w-fit cursor-pointer",
)}
key={currentPage + 1}
>
{currentPage + 1}
</Link>
))}
</div>
</div>
);
<DisplayPagination>
<PaginationContent>
{[...Array(totalPages).keys()].map((pageNumber) => (
<PaginationItem key={pageNumber}>
<PaginationLink
href={`${pathname}?limit=${page.meta.page.limit}&offset=${
pageNumber * page.meta.page.limit
}`}
isActive={pageNumber + 1 === page.meta.page.current}
>
{pageNumber + 1}
</PaginationLink>
</PaginationItem>
))}
</PaginationContent>
</DisplayPagination>
)
};

export default Pagination;
2 changes: 1 addition & 1 deletion examples/payments/src/components/search/SearchResults.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default function SearchResults({
</div>
</div>
<hr />
<div className="grid grid-cols-[auto_auto_auto] gap-8">
<div className="grid grid-cols-[auto_1fr] gap-8">
<div className="hidden w-[14rem] md:block lg:w-[16rem]">
<h3 className="font-semibold">Category</h3>
{nav && <NodeMenu nav={nav} />}
Expand Down
27 changes: 26 additions & 1 deletion examples/simple/src/components/pagination/Pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const PaginationLink = ({
aria-current={isActive ? "page" : undefined}
className={cn(
buttonVariants({
variant: "link",
variant: isActive ? "primary" : "secondary",
size,
}),
className,
Expand All @@ -64,6 +64,30 @@ const PaginationLink = ({
);
PaginationLink.displayName = "PaginationLink";

type PaginationButtonProps = {
isActive?: boolean;
} & ButtonProps;

const PaginationButton = ({
className,
isActive,
size = "small",
...props
}: PaginationButtonProps) => (
<button
aria-current={isActive ? "page" : undefined}
className={cn(
buttonVariants({
variant: isActive ? "primary" : "secondary",
size,
}),
className,
)}
{...props}
/>
);
PaginationButton.displayName = "PaginationButton";

const PaginationPrevious = ({
className,
...props
Expand Down Expand Up @@ -117,4 +141,5 @@ export {
PaginationLink,
PaginationNext,
PaginationPrevious,
PaginationButton,
};
49 changes: 23 additions & 26 deletions examples/simple/src/components/search/Pagination.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import React from "react";
import { useProducts } from "./ProductsProvider";
import clsx from "clsx";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
Pagination as DisplayPagination,
PaginationContent,
PaginationItem, PaginationLink,
} from "../pagination/Pagination";


function calculateTotalPages(totalItems: number, limit: number): number {
// Ensure both totalItems and limit are positive integers
Expand Down Expand Up @@ -30,30 +34,23 @@ export const Pagination = (): JSX.Element => {
const totalPages = calculateTotalPages(totalResults, page.meta.page.limit);

return (
<div className={clsx("block")}>
<div className="flex justify-center gap-2 flex-wrap">
{[...Array(totalPages).keys()].map((currentPage) => (
<Link
href={`${pathname}?limit=${page.meta.page.limit}&offset=${
currentPage * page.meta.page.limit
}`}
className={clsx(
currentPage + 1 === page.meta.page.current
? "bg-brand-primary"
: "bg-gray-100",
currentPage + 1 === page.meta.page.current
? "text-white"
: "text-black",
"flex w-full items-center justify-center rounded-md bg-brand-primary px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-brand-highlight w-fit cursor-pointer",
)}
key={currentPage + 1}
>
{currentPage + 1}
</Link>
))}
</div>
</div>
);
<DisplayPagination>
<PaginationContent>
{[...Array(totalPages).keys()].map((pageNumber) => (
<PaginationItem key={pageNumber}>
<PaginationLink
href={`${pathname}?limit=${page.meta.page.limit}&offset=${
pageNumber * page.meta.page.limit
}`}
isActive={pageNumber + 1 === page.meta.page.current}
>
{pageNumber + 1}
</PaginationLink>
</PaginationItem>
))}
</PaginationContent>
</DisplayPagination>
)
};

export default Pagination;
2 changes: 1 addition & 1 deletion examples/simple/src/components/search/SearchResults.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default function SearchResults({
</div>
</div>
<hr />
<div className="grid grid-cols-[auto_auto_auto] gap-8">
<div className="grid grid-cols-[auto_1fr] gap-8">
<div className="hidden w-[14rem] md:block lg:w-[16rem]">
<h3 className="font-semibold">Category</h3>
{nav && <NodeMenu nav={nav} />}
Expand Down
Loading

0 comments on commit 1c24cf2

Please sign in to comment.