Pagination Bar

import {Provider} from '@clayui/core';
import PaginationBar from '@clayui/pagination-bar';
import {ClayPaginationWithBasicItems} from '@clayui/pagination';
import Button from '@clayui/button';
import Icon from '@clayui/icon';
import React from 'react';

export default function App() {
  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <PaginationBar>
          <PaginationBar.DropDown
            items={[
              {
                label: '10',
                onClick: () => {},
              },
            ]}
            trigger={
              <Button displayType="unstyled">
                {'10 items per page'}

                <Icon symbol="caret-double-l" />
              </Button>
            }
          />

          <PaginationBar.Results>
            Showing a handful of items...
          </PaginationBar.Results>

          <ClayPaginationWithBasicItems
            defaultActive={1}
            ellipsisProps={{'aria-label': 'More', title: 'More'}}
            totalPages={10}
          />
        </PaginationBar>
      </div>
    </Provider>
  );
}

import {Provider} from '@clayui/core';
import {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar';
import React, {useState} from 'react';

export default function App() {
  const [delta, setDelta] = useState(4);

  const deltas = [
    {
      href: '#1',
      label: 1,
    },
    {
      label: 2,
    },
    {
      href: '#3',
      label: 3,
    },
    {
      label: 4,
    },
  ];

  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <ClayPaginationBarWithBasicItems
          defaultActive={1}
          activeDelta={delta}
          deltas={deltas}
          ellipsisBuffer={3}
          ellipsisProps={{'aria-label': 'More', title: 'More'}}
          onDeltaChange={setDelta}
          totalItems={21}
        />
      </div>
    </Provider>
  );
}

import {Provider} from '@clayui/core';
import {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar';
import React, {useState} from 'react';

export default function App() {
  const [delta, setDelta] = useState(5);

  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <ClayPaginationBarWithBasicItems
          activeDelta={delta}
          defaultActive={1}
          ellipsisBuffer={3}
          ellipsisProps={{'aria-label': 'More', title: 'More'}}
          onDeltaChange={setDelta}
          showDeltasDropDown={false}
          totalItems={21}
        />
      </div>
    </Provider>
  );
}