78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { Pagination } from './schema';
|
|
import { getTranslation, LanguageKey } from './language';
|
|
|
|
interface PaginationToolsComponentProps {
|
|
pagination: Pagination;
|
|
updatePagination: (updates: Partial<Pagination>) => void;
|
|
lang?: LanguageKey;
|
|
}
|
|
|
|
export function PaginationToolsComponent({
|
|
pagination,
|
|
updatePagination,
|
|
lang = 'en'
|
|
}: PaginationToolsComponentProps) {
|
|
const t = getTranslation(lang);
|
|
|
|
const handlePageChange = (newPage: number) => {
|
|
if (newPage >= 1 && newPage <= pagination.totalPages) {
|
|
updatePagination({ page: newPage });
|
|
}
|
|
};
|
|
|
|
const handleSizeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
updatePagination({ size: Number(e.target.value), page: 1 });
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white p-4 rounded-lg shadow mb-4">
|
|
<div className="flex flex-wrap justify-between items-center gap-4">
|
|
{/* Navigation buttons */}
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={() => handlePageChange(pagination.page - 1)}
|
|
disabled={pagination.page <= 1}
|
|
className="px-3 py-1 bg-gray-200 rounded disabled:opacity-50"
|
|
>
|
|
{t.previous}
|
|
</button>
|
|
|
|
<span className="px-4 py-1">
|
|
{t.page} {pagination.page} {t.of} {pagination.totalPages}
|
|
</span>
|
|
|
|
<button
|
|
onClick={() => handlePageChange(pagination.page + 1)}
|
|
disabled={pagination.page >= pagination.totalPages}
|
|
className="px-3 py-1 bg-gray-200 rounded disabled:opacity-50"
|
|
>
|
|
{t.next}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Items per page selector */}
|
|
<div className="flex items-center space-x-2">
|
|
<label htmlFor="page-size" className="text-sm font-medium">{t.itemsPerPage}</label>
|
|
<select
|
|
id="page-size"
|
|
value={pagination.size}
|
|
onChange={handleSizeChange}
|
|
className="border rounded px-2 py-1"
|
|
>
|
|
{[5, 10, 20, 50].map(size => (
|
|
<option key={size} value={size}>{size}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Pagination stats */}
|
|
<div className="text-sm text-gray-600">
|
|
<div>{t.showing} {pagination.pageCount} {t.of} {pagination.totalCount} {t.items}</div>
|
|
<div>{t.total}: {pagination.allCount} {t.items}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|