50 أسطر
1.6 KiB
TypeScript
50 أسطر
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import type { PaginationMeta } from "@/types/api";
|
|
|
|
type PaginationControlsProps = {
|
|
pagination?: PaginationMeta | null;
|
|
loading?: boolean;
|
|
onPageChange: (page: number) => void;
|
|
};
|
|
|
|
export function PaginationControls({ pagination, loading, onPageChange }: PaginationControlsProps) {
|
|
if (!pagination) return null;
|
|
|
|
const currentPage = pagination.page ?? 1;
|
|
const totalPages = pagination.totalPages ?? 1;
|
|
const previousPage = pagination.previousPage ?? (currentPage > 1 ? currentPage - 1 : null);
|
|
const nextPage = pagination.nextPage ?? (currentPage < totalPages ? currentPage + 1 : null);
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-border/70 bg-card/60 p-3">
|
|
<div className="text-sm text-muted-foreground">
|
|
Page {currentPage} of {totalPages} · Total {pagination.total}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={loading || !previousPage}
|
|
onClick={() => previousPage && onPageChange(previousPage)}
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
Previous
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={loading || !nextPage}
|
|
onClick={() => nextPage && onPageChange(nextPage)}
|
|
>
|
|
Next
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|