Files
telegram-shop/admin-next/src/components/shared/pagination.tsx
NW a4a5fd449d feat(admin): integrate Next.js admin panel (admin-next/) from feat/nextjs-admin
- Add admin-next/: full Next.js + Prisma + shadcn admin panel (45 API routes, 76 components)
- docker-compose: tg_shop_admin service (port 3000, shared db/shop.db, prisma), bot talks to it via ADMIN_CHAT_URL=http://tg_shop_admin:3000/api/chat
- tor-proxy now proxies onion admin to tg_shop_admin:3000 (new panel)
- chatbotService: ADMIN_CHAT_URL default = http://tg_shop_admin:3000/api/chat (removed localhost:3100 anachronism)
- .env admin secrets gitignored (admin-next/.env)
2026-08-08 01:31:45 +01:00

84 lines
2.6 KiB
TypeScript
Executable File

"use client";
import { useMemo } from "react";
import { Button } from "@/components/ui/button";
import { ChevronLeft, ChevronRight } from "lucide-react";
interface PaginationProps {
page: number;
total: number;
limit: number;
onPageChange: (page: number) => void;
}
function getPageNumbers(currentPage: number, totalPages: number): (number | "...")[] {
if (totalPages <= 7) {
return Array.from({ length: totalPages }, (_, i) => i + 1);
}
const pages: (number | "...")[] = [1];
if (currentPage > 3) pages.push("...");
const start = Math.max(2, currentPage - 1);
const end = Math.min(totalPages - 1, currentPage + 1);
for (let i = start; i <= end; i++) pages.push(i);
if (currentPage < totalPages - 2) pages.push("...");
pages.push(totalPages);
return pages;
}
export function Pagination({ page, total, limit, onPageChange }: PaginationProps) {
const totalPages = useMemo(() => Math.max(1, Math.ceil(total / limit)), [total, limit]);
const rangeStart = total === 0 ? 0 : (page - 1) * limit + 1;
const rangeEnd = Math.min(page * limit, total);
const pageNumbers = useMemo(() => getPageNumbers(page, totalPages), [page, totalPages]);
if (total <= 0) return null;
return (
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<p className="text-sm text-muted-foreground">
Showing {rangeStart}\u2013{rangeEnd} of {total}
</p>
<div className="flex items-center gap-1">
<Button
variant="outline"
size="icon"
className="h-8 w-8"
disabled={page <= 1}
onClick={() => onPageChange(page - 1)}
aria-label="Previous page"
>
<ChevronLeft className="h-4 w-4" />
</Button>
{pageNumbers.map((p, i) =>
p === "..." ? (
<span key={`ellipsis-${i}`} className="px-1.5 text-sm text-muted-foreground">
</span>
) : (
<Button
key={p}
variant={page === p ? "default" : "outline"}
size="icon"
className="h-8 w-8"
onClick={() => onPageChange(p)}
aria-label={`Page ${p}`}
>
{p}
</Button>
)
)}
<Button
variant="outline"
size="icon"
className="h-8 w-8"
disabled={page >= totalPages}
onClick={() => onPageChange(page + 1)}
aria-label="Next page"
>
<ChevronRight className="h-4 w-4" />
</Button>
</div>
</div>
);
}