StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Button styling cleanup, prop consistency

Browse source
This commit is contained in:
DaneEveritt 2022-06-20 12:38:23 -04:00
parent 7dd74ecc9d
commit 7b0e2ce99d
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
9 changed files with 121 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

17
resources/scripts/components/elements/table/PaginationFooter.tsx
View file

@ -30,6 +30,13 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
return null;
}
const buttonProps = (page: number) => ({
size: Button.Sizes.Small,
shape: Button.Shapes.IconSquare,
variant: Button.Variants.Secondary,
onClick: () => onPageSelect(page),
});
return (
<div className={classNames('flex items-center justify-between my-2', className)}>
<p className={'text-sm text-neutral-500'}>
@ -42,21 +49,21 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
</p>
{pagination.totalPages > 1 &&
<div className={'flex space-x-1'}>
<Button.Text small disabled={pages.previous.length !== 2} onClick={() => onPageSelect(1)}>
<Button.Text {...buttonProps(1)} disabled={pages.previous.length !== 2}>
<ChevronDoubleLeftIcon className={'w-3 h-3'}/>
</Button.Text>
{pages.previous.reverse().map((value) => (
<Button.Text small key={`previous-${value}`} onClick={() => onPageSelect(value)}>
<Button.Text key={`previous-${value}`} {...buttonProps(value)}>
{value}
</Button.Text>
))}
<Button small disabled>{current}</Button>
<Button size={Button.Sizes.Small} shape={Button.Shapes.IconSquare}>{current}</Button>
{pages.next.map((value) => (
<Button.Text small key={`next-${value}`} onClick={() => onPageSelect(value)}>
<Button.Text key={`next-${value}`} {...buttonProps(value)}>
{value}
</Button.Text>
))}
<Button.Text small disabled={pages.next.length !== 2} onClick={() => onPageSelect(total)}>
<Button.Text {...buttonProps(total)} disabled={pages.next.length !== 2}>
<ChevronDoubleRightIcon className={'w-3 h-3'}/>
</Button.Text>
</div>