diff options
Diffstat (limited to 'src/components/organisms/nav')
| -rw-r--r-- | src/components/organisms/nav/pagination/pagination.module.scss | 4 | ||||
| -rw-r--r-- | src/components/organisms/nav/pagination/pagination.tsx | 13 |
2 files changed, 16 insertions, 1 deletions
diff --git a/src/components/organisms/nav/pagination/pagination.module.scss b/src/components/organisms/nav/pagination/pagination.module.scss index 13970d3..eeb9ca6 100644 --- a/src/components/organisms/nav/pagination/pagination.module.scss +++ b/src/components/organisms/nav/pagination/pagination.module.scss @@ -4,6 +4,10 @@ gap: var(--spacing-sm); align-items: center; width: fit-content; + + &--centered { + margin-inline: auto; + } } .list { diff --git a/src/components/organisms/nav/pagination/pagination.tsx b/src/components/organisms/nav/pagination/pagination.tsx index 8e95122..006663b 100644 --- a/src/components/organisms/nav/pagination/pagination.tsx +++ b/src/components/organisms/nav/pagination/pagination.tsx @@ -32,6 +32,12 @@ export type PaginationProps = Omit<NavProps, 'children'> & { */ current: number; /** + * Should the pagination be centered? + * + * @default false + */ + isCentered?: boolean; + /** * Function used to provide an accessible label to pagination items. */ renderItemAriaLabel: RenderPaginationItemAriaLabel; @@ -83,6 +89,7 @@ const PaginationWithRef: ForwardRefRenderFunction< { className = '', current, + isCentered = false, renderItemAriaLabel, renderLink, siblings = 1, @@ -91,7 +98,11 @@ const PaginationWithRef: ForwardRefRenderFunction< }, ref ) => { - const paginationClass = `${styles.wrapper} ${className}`; + const paginationClass = [ + styles.wrapper, + styles[isCentered ? 'wrapper--centered' : ''], + className, + ].join(' '); const displayRange = current === 1 || current === total ? siblings + 1 : siblings; const hasPreviousPage = current > 1; |
