feat: added clear, copy log buttons and pagination in completed downloads

2026-03-22 19:25:49 +05:30 · 2026-01-09 23:40:35 +05:30
parent 01f4e96101
commit 2b7ab9def4
10 changed files with 214 additions and 15 deletions
--- a/src/components/custom/paginationBar.tsx
+++ b/src/components/custom/paginationBar.tsx
@@ -0,0 +1,81 @@
+import { Paginated } from "@/types/download";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
+
+export default function PaginationBar({
+    paginatedData,
+    setPage,
+}: {
+    paginatedData: Paginated;
+    setPage: (page: number) => void;
+}) {
+    return (
+        <Pagination className="mt-4">
+            <PaginationContent>
+                <PaginationItem>
+                    <PaginationPrevious
+                        onClick={() => setPage(paginatedData.prev_page ?? paginatedData.first_page)}
+                        aria-disabled={!paginatedData.prev_page}
+                        className={!paginatedData.prev_page ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+                    />
+                </PaginationItem>
+
+                {paginatedData.pages.map((link, index, array) => {
+                    const currentPage = paginatedData.current_page;
+                    const pageNumber = link.page!;
+
+                    // Show first page, last page, current page, and 2 pages around current
+                    const showPage =
+                        pageNumber === 1 ||
+                        pageNumber === paginatedData.last_page ||
+                        Math.abs(pageNumber - currentPage) <= 1;
+
+                    // Show ellipsis if there's a gap
+                    const prevVisiblePage = array
+                        .slice(0, index)
+                        .reverse()
+                        .find((prevLink) => {
+                            const prevPageNum = prevLink.page!;
+                            return (
+                                prevPageNum === 1 ||
+                                prevPageNum === paginatedData.last_page ||
+                                Math.abs(prevPageNum - currentPage) <= 1
+                            );
+                        })?.page;
+
+                    const showEllipsis = showPage && prevVisiblePage && pageNumber - prevVisiblePage > 1;
+
+                    if (!showPage) return null;
+
+                    return (
+                        <div key={link.page} className="contents">
+                            {showEllipsis && (
+                                <PaginationItem>
+                                    <PaginationEllipsis />
+                                </PaginationItem>
+                            )}
+                            {showPage && (
+                                <PaginationItem>
+                                    <PaginationLink
+                                        className="cursor-pointer"
+                                        onClick={() => setPage(link.page)}
+                                        isActive={link.active}
+                                    >
+                                        {link.label}
+                                    </PaginationLink>
+                                </PaginationItem>
+                            )}
+                        </div>
+                    );
+                })}
+
+                <PaginationItem>
+                    <PaginationNext
+                        onClick={() => setPage(paginatedData.next_page ?? paginatedData.last_page)}
+                        aria-disabled={!paginatedData.next_page}
+                        className={!paginatedData.next_page ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+                    />
+                </PaginationItem>
+            </PaginationContent>
+        </Pagination>
+    )
+}