Disabled States

function DisabledStatesExample() {
  const [currentItems, setCurrentItems] = useState(ITEMS.slice(0, 10));
 
  return (
    <div className="space-y-4">
      <h2 className="text-2xl font-bold">Disabled States</h2>
      <p className="text-neutral-600">Pagination with various disabled states</p>
 
      <div className="flex flex-col gap-4">
        {/* Fully disabled */}
        <Pagination
          totalItems={ITEMS.length}
          defaultPageSize={10}
          isDisabled={true}
          onChange={({ currentPage, pageSize }) => {
            const start = (currentPage - 1) * pageSize;
            setCurrentItems(ITEMS.slice(start, start + pageSize));
          }}
        />
 
        {/* Disabled navigation */}
        <Pagination
          totalItems={ITEMS.length}
          defaultPageSize={10}
          isDisabledPrevious={true}
          isDisabledNext={true}
          onChange={({ currentPage, pageSize }) => {
            const start = (currentPage - 1) * pageSize;
            setCurrentItems(ITEMS.slice(start, start + pageSize));
          }}
        />
      </div>
    </div>
  );
}

<Pagination
  isDisabled={true}
  // ... other props
/>

<Pagination
  isDisabledPrevious={true} // Disable previous button
  isDisabledNext={true} // Disable next button
  // ... other props
/>

<Pagination
  isDisabledPrevious={currentPage === 1}
  isDisabledNext={currentPage === totalPages}
  // ... other props
/>