50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
|
import usePagination from '@mui/material/usePagination';
|
||
|
|
import { styled } from '@mui/material/styles';
|
||
|
|
|
||
|
|
const List = styled('ul')({
|
||
|
|
listStyle: 'none',
|
||
|
|
padding: 0,
|
||
|
|
margin: 0,
|
||
|
|
display: 'flex',
|
||
|
|
});
|
||
|
|
|
||
|
|
export default function UsePagination() {
|
||
|
|
const { items } = usePagination({
|
||
|
|
count: 10,
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav>
|
||
|
|
<List>
|
||
|
|
{items.map(({ page, type, selected, ...item }, index) => {
|
||
|
|
let children = null;
|
||
|
|
|
||
|
|
if (type === 'start-ellipsis' || type === 'end-ellipsis') {
|
||
|
|
children = '…';
|
||
|
|
} else if (type === 'page') {
|
||
|
|
children = (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
style={{
|
||
|
|
fontWeight: selected ? 'bold' : undefined,
|
||
|
|
}}
|
||
|
|
{...item}
|
||
|
|
>
|
||
|
|
{page}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
children = (
|
||
|
|
<button type="button" {...item}>
|
||
|
|
{type}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return <li key={index}>{children}</li>;
|
||
|
|
})}
|
||
|
|
</List>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|