feat(core): add Pagination component (bigcommerce#1235)

.changeset/six-cooks-brush.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Add `Pagination` component.

core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx

@@ -4,11 +4,11 @@ import { NextIntlClientProvider } from 'next-intl';
 import { getMessages, getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
 import { ProductCard } from '~/components/product-card';
+import { Pagination } from '~/components/ui/pagination';
 import { LocaleType } from '~/i18n';
 
 import { FacetedSearch } from '../../_components/faceted-search';
 import { MobileSideNav } from '../../_components/mobile-side-nav';
-import { Pagination } from '../../_components/pagination';
 import { SortBy } from '../../_components/sort-by';
 import { fetchFacetedSearch } from '../../fetch-faceted-search';
 

core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx

@@ -5,11 +5,11 @@ import { getMessages, getTranslations, unstable_setRequestLocale } from 'next-in
 
 import { Breadcrumbs } from '~/components/breadcrumbs';
 import { ProductCard } from '~/components/product-card';
+import { Pagination } from '~/components/ui/pagination';
 import { LocaleType } from '~/i18n';
 
 import { FacetedSearch } from '../../_components/faceted-search';
 import { MobileSideNav } from '../../_components/mobile-side-nav';
-import { Pagination } from '../../_components/pagination';
 import { SortBy } from '../../_components/sort-by';
 import { fetchFacetedSearch } from '../../fetch-faceted-search';
 

core/app/[locale]/(default)/(faceted)/search/page.tsx

@@ -3,11 +3,11 @@ import { getMessages, getTranslations } from 'next-intl/server';
 
 import { ProductCard } from '~/components/product-card';
 import { SearchForm } from '~/components/search-form';
+import { Pagination } from '~/components/ui/pagination';
 import { LocaleType } from '~/i18n';
 
 import { FacetedSearch } from '../_components/faceted-search';
 import { MobileSideNav } from '../_components/mobile-side-nav';
-import { Pagination } from '../_components/pagination';
 import { SortBy } from '../_components/sort-by';
 import { fetchFacetedSearch } from '../fetch-faceted-search';
 

core/app/[locale]/(default)/account/[tab]/_components/addresses-content/index.tsx

@@ -1,8 +1,8 @@
 import { getLocale, getTranslations } from 'next-intl/server';
 
 import { getCustomerAddresses } from '~/client/queries/get-customer-addresses';
+import { Pagination } from '~/components/ui/pagination';
 
-import { Pagination } from '../../../../(faceted)/_components/pagination';
 import { TabHeading } from '../tab-heading';
 
 import { AddressBook } from './address-book';
@@ -60,7 +60,7 @@ export const AddressesContent = async ({
       <TabHeading heading="addresses" />
       <AddressBook addressesCount={addressesCount} customerAddresses={addresses} key={endCursor}>
         <Pagination
-          className="my-0 flex inline-flex justify-center text-center"
+          className="my-0 inline-flex justify-center text-center"
           endCursor={endCursor}
           hasNextPage={hasNextPage}
           hasPreviousPage={hasPreviousPage}

core/components/ui/pagination/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export * from './pagination';

core/app/[locale]/(default)/(faceted)/_components/pagination.tsx → core/components/ui/pagination/pagination.tsx

@@ -1,13 +1,11 @@
-'use client';
-
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { usePathname, useSearchParams } from 'next/navigation';
+import { ComponentPropsWithoutRef } from 'react';
 
 import { Link } from '~/components/link';
 import { cn } from '~/lib/utils';
 
-interface PaginationProps {
-  className?: string;
+interface Props extends ComponentPropsWithoutRef<'nav'> {
   endCursor: string | null;
   hasPreviousPage: boolean;
   hasNextPage: boolean;
@@ -16,15 +14,17 @@ interface PaginationProps {
   nextLabel: string;
 }
 
-export const Pagination = ({
+const Pagination = ({
   className,
+  children,
   endCursor,
   hasPreviousPage,
   hasNextPage,
   startCursor,
   prevLabel,
   nextLabel,
-}: PaginationProps) => {
+  ...props
+}: Props) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
@@ -45,7 +45,11 @@ export const Pagination = ({
   }
 
   return (
-    <nav aria-label="Pagination" className={cn('my-6 text-center text-primary', className)}>
+    <nav
+      aria-label="Pagination"
+      className={cn('my-6 text-center text-primary', className)}
+      {...props}
+    >
       {hasPreviousPage ? (
         <Link className="inline-block" href={`${pathname}?${beforeSearchParams.toString()}`}>
           <span className="sr-only">{prevLabel}</span>
@@ -66,3 +70,5 @@ export const Pagination = ({
     </nav>
   );
 };
+
+export { Pagination };