mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-02 16:48:50 +01:00
e5336039fc
* ci(backend-review.yml): add linter step to the backend review workflow * chore(backend-review.yml): remove prettier from lint-action configuration * chore: apply new linting workflow * chore(lint-staged.config.js): reorder lint-staged tasks for JavaScript and TypeScript files * chore(eslint): update ignorePatterns in .eslintrc.js chore(lint-action): remove prettier option in backend-review.yml chore(package.json): add lint and lint:fix scripts * chore(lint-staged.config.js): remove prettier --write command for js, jsx, ts, tsx files * chore(titleConvo.js): remove unnecessary console.log statement chore(titleConvo.js): add missing comma in options object * chore: apply linting to all files * chore(lint-staged.config.js): update lint-staged configuration to include prettier formatting
95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
|
|
type TPluginPaginationProps = {
|
|
currentPage: number;
|
|
maxPage: number;
|
|
onChangePage: (page: number) => void;
|
|
};
|
|
|
|
const PluginPagination: React.FC<TPluginPaginationProps> = ({
|
|
currentPage,
|
|
maxPage,
|
|
onChangePage,
|
|
}) => {
|
|
const pages = [...Array(maxPage).keys()].map((i) => i + 1);
|
|
|
|
const handlePageChange = (page: number) => {
|
|
if (page < 1 || page > maxPage) {
|
|
return;
|
|
}
|
|
onChangePage(page);
|
|
};
|
|
|
|
return (
|
|
<div className="flex gap-2 text-sm text-black/60 dark:text-white/70">
|
|
<div
|
|
role="button"
|
|
aria-label="Previous page"
|
|
onClick={() => handlePageChange(currentPage - 1)}
|
|
className={`flex cursor-default items-center text-sm ${
|
|
currentPage === 1
|
|
? 'text-black/70 opacity-50 dark:text-white/70'
|
|
: 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
|
|
}`}
|
|
>
|
|
<svg
|
|
stroke="currentColor"
|
|
fill="none"
|
|
strokeWidth="2"
|
|
viewBox="0 0 24 24"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="h-4 w-4"
|
|
height="1em"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<polyline points="15 18 9 12 15 6"></polyline>
|
|
</svg>
|
|
Prev
|
|
</div>
|
|
{pages.map((page) => (
|
|
<div
|
|
role="button"
|
|
key={page}
|
|
className={`flex h-5 w-5 items-center justify-center text-sm ${
|
|
currentPage === page
|
|
? 'text-blue-600 hover:text-blue-600 dark:text-blue-600 dark:hover:text-blue-600'
|
|
: 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
|
|
}`}
|
|
onClick={() => onChangePage(page)}
|
|
>
|
|
{page}
|
|
</div>
|
|
))}
|
|
<div
|
|
role="button"
|
|
aria-label="Next page"
|
|
onClick={() => handlePageChange(currentPage + 1)}
|
|
className={`flex cursor-default items-center text-sm ${
|
|
currentPage === maxPage
|
|
? 'text-black/70 opacity-50 dark:text-white/70'
|
|
: 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
|
|
}`}
|
|
>
|
|
Next
|
|
<svg
|
|
stroke="currentColor"
|
|
fill="none"
|
|
strokeWidth="2"
|
|
viewBox="0 0 24 24"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="h-4 w-4"
|
|
height="1em"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PluginPagination;
|