51 lines
1.5 KiB
TypeScript
Executable File
51 lines
1.5 KiB
TypeScript
Executable File
import {Trans} from '@common/i18n/trans';
|
|
import {IconButton} from '@common/ui/buttons/icon-button';
|
|
import {KeyboardArrowLeftIcon} from '@common/icons/material/KeyboardArrowLeft';
|
|
import {KeyboardArrowRightIcon} from '@common/icons/material/KeyboardArrowRight';
|
|
import React from 'react';
|
|
import {FontSelectorState} from '@common/ui/font-selector/font-selector-state';
|
|
|
|
interface FontSelectorPaginationProps {
|
|
state: FontSelectorState;
|
|
}
|
|
export function FontSelectorPagination({
|
|
state: {currentPage = 0, setCurrentPage, filteredFonts, pages},
|
|
}: FontSelectorPaginationProps) {
|
|
const total = filteredFonts?.length || 0;
|
|
|
|
return (
|
|
<div className="flex items-center justify-end gap-24 text-sm mt-30 pt-14 border-t">
|
|
{total > 0 && (
|
|
<div>
|
|
<Trans
|
|
message=":from - :to of :total"
|
|
values={{
|
|
from: currentPage * 20 + 1,
|
|
to: Math.min((currentPage + 1) * 20, total),
|
|
total,
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="text-muted">
|
|
<IconButton
|
|
disabled={currentPage < 1}
|
|
onClick={() => {
|
|
setCurrentPage(Math.max(0, currentPage - 1));
|
|
}}
|
|
>
|
|
<KeyboardArrowLeftIcon />
|
|
</IconButton>
|
|
<IconButton
|
|
disabled={currentPage >= pages.length - 1}
|
|
onClick={() => {
|
|
setCurrentPage(currentPage + 1);
|
|
}}
|
|
>
|
|
<KeyboardArrowRightIcon />
|
|
</IconButton>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|