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';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/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';

import '@clayui/css/lib/css/atlas.css';

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="/public/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';

import '@clayui/css/lib/css/atlas.css';

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

	return (
		<Provider spritemap="/public/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>
	);
}