diff --git a/apps/web/components/molecules/pagginationArrow/paginationArrow.tsx b/apps/web/components/molecules/pagginationArrow/paginationArrow.tsx new file mode 100644 index 0000000..f2e3ccc --- /dev/null +++ b/apps/web/components/molecules/pagginationArrow/paginationArrow.tsx @@ -0,0 +1,42 @@ +import { VisuallyHidden } from 'ui'; +import { + ChevronLeftIcon as PrevPageIcon, + ChevronRightIcon as NextPageIcon, +} from '@heroicons/react/20/solid'; +import clsx from 'clsx'; + +type PaginationArrowProps = { + pageNumber: number; + isDisabled: boolean; + type: 'next' | 'prev'; +}; + +export const PaginationArrow = ({ + pageNumber, + isDisabled, + type, +}: PaginationArrowProps) => { + return ( + + {type === 'prev' && ( + <> + Poprzednia strona + + ); +}; diff --git a/apps/web/components/molecules/paginationItem/paginationItem.tsx b/apps/web/components/molecules/paginationItem/paginationItem.tsx new file mode 100644 index 0000000..f05360a --- /dev/null +++ b/apps/web/components/molecules/paginationItem/paginationItem.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx'; + +type PaginationItemProps = { + pageNumber: number; + isCurrent: boolean; +}; + +export const PaginationItem = ({ + pageNumber, + isCurrent, +}: PaginationItemProps) => { + return ( + + ); +}; diff --git a/apps/web/components/organisms/challengesList/challengesList.tsx b/apps/web/components/organisms/challengesList/challengesList.tsx index 6862597..4641b4d 100644 --- a/apps/web/components/organisms/challengesList/challengesList.tsx +++ b/apps/web/components/organisms/challengesList/challengesList.tsx @@ -1,5 +1,6 @@ import { ChallengeItem } from 'molecules/challengeItem/challengeItem'; import type { Challenge } from '../../../types/types'; +import { Pagination } from 'organisms/pagination/pagination'; type TasksListProps = { challenges: Challenge[]; @@ -13,9 +14,8 @@ export const ChallengesList = ({ challenges }: TasksListProps) => { })} - {/*
*/} - {/* Zadania*/} - {/*
*/} + {/**/} + ); }; diff --git a/apps/web/components/organisms/pagination/pagination.tsx b/apps/web/components/organisms/pagination/pagination.tsx new file mode 100644 index 0000000..448f061 --- /dev/null +++ b/apps/web/components/organisms/pagination/pagination.tsx @@ -0,0 +1,92 @@ +import { useRouter } from 'next/router'; +import { PaginationItem } from 'molecules/paginationItem/paginationItem'; +import { PaginationArrow } from 'molecules/pagginationArrow/paginationArrow'; + +type PaginationProps = { + numberOfItems: number; +}; + +export const Pagination = ({ numberOfItems }: PaginationProps) => { + const router = useRouter(); + const currentPage: number = + router.query.page && !isNaN(Number(router.query.page)) + ? Number(router.query.page) + : 1; + const perPage = + router.query.page && !isNaN(Number(router.query.limit)) + ? Number(router.query.limit) + : 11; + const totalPages = Math.ceil(numberOfItems / perPage); + + const prevPageNumber = currentPage - 1; + const nextPageNumber = currentPage + 1; + const startNumberOfItemsOnCurrentPage = (currentPage - 1) * perPage + 1; + const endNumberOfItemsOnCurrentPage = + currentPage !== totalPages ? currentPage * perPage : numberOfItems; + + return ( +
+
+ + Poprzednia + + + {currentPage} + + + Następna + +
+
+
+

+ + {startNumberOfItemsOnCurrentPage} + + - + {endNumberOfItemsOnCurrentPage}{' '} + z {numberOfItems} wyników +

+
+
+ +
+
+
+ ); +};