Custom Navigation

function CustomNavigationExample() {
  const [currentItems, setCurrentItems] = useState(ITEMS.slice(0, 10));
 
  return (
    <div className="space-y-4">
      <h2 className="text-2xl font-bold">Custom Navigation</h2>
      <p className="text-neutral-600">Pagination with custom navigation controls</p>
 
      <Pagination
        totalItems={ITEMS.length}
        defaultPageSize={10}
        previousIcon="⟨"
        nextIcon="⟩"
        navigationButtonVariant="primary"
        navigationButtonColor="secondary"
        onChange={({ currentPage, pageSize }) => {
          const start = (currentPage - 1) * pageSize;
          setCurrentItems(ITEMS.slice(start, start + pageSize));
        }}
      />
    </div>
  );
}

<Pagination
  previousIcon="←"
  nextIcon="→"
/>
 
// Using React Icons
import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
 
<Pagination
  previousIcon={<FiChevronLeft />}
  nextIcon={<FiChevronRight />}
/>

<Pagination
  navigationButtonVariant="outline" // or "solid"
  navigationButtonColor="primary" // or "secondary"
  navigationButtonSize="lg" // "sm" | "md" | "lg"
/>

<Pagination
  previousLabel="Previous Page"
  nextLabel="Next Page"
/>