From 113d80c3ff325bc91a5456de11648dd6f919b1fa Mon Sep 17 00:00:00 2001
From: Ravi Rajput <ravi81rajput@gmail.com>
Date: Tue, 27 Feb 2024 23:12:31 +0530
Subject: [PATCH] Replaced pagination with shadcn's pagination

---
 apps/web/app/app/[keyid]/files/page.tsx | 115 ++++++++++++++++-------
 apps/web/components/ui/pagination.tsx   | 117 ++++++++++++++++++++++++
 2 files changed, 197 insertions(+), 35 deletions(-)
 create mode 100644 apps/web/components/ui/pagination.tsx

diff --git a/apps/web/app/app/[keyid]/files/page.tsx b/apps/web/app/app/[keyid]/files/page.tsx
index 3917c49e..dee71564 100644
--- a/apps/web/app/app/[keyid]/files/page.tsx
+++ b/apps/web/app/app/[keyid]/files/page.tsx
@@ -1,10 +1,21 @@
-import Link from "next/link";
 import { redirect } from "next/navigation";
 import { auth } from "@/auth";
 import { getMediaFiles, getCount } from "./actions";
 import { Media } from "@medialit/models";
-import { Button } from "@/components/ui/button";
 import FilePreview from "./file-preview";
+import {
+    Pagination,
+    PaginationContent,
+    PaginationEllipsis,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious,
+} from "@/components/ui/pagination";
+import {
+    DoubleArrowLeftIcon,
+    DoubleArrowRightIcon,
+} from "@radix-ui/react-icons";
 
 export default async function Media({
     params,
@@ -49,42 +60,76 @@ export default async function Media({
                     ))}
                 </div>
             </div>
-
-            <div className="flex items-center justify-center gap-2">
-                <Link href={`/app/${keyid}/files?page=${Number(page) - 1}`}>
-                    <Button
-                        disabled={page ? parseInt(page) <= 1 : true}
-                        className={
-                            page
-                                ? parseInt(page) <= 1
-                                    ? "!bg-muted-foreground"
-                                    : ""
-                                : ""
-                        }
+            <Pagination>
+                <PaginationContent>
+                    <PaginationItem>
+                        <PaginationLink
+                            href={`/app/${keyid}/files?page=${1}`}
+                            className={`
+                     ${
+                         parseInt(page) === 1
+                             ? "pointer-events-none text-slate-400"
+                             : ""
+                     }
+                 `}
+                        >
+                            <DoubleArrowLeftIcon className="h-4 w-4" />
+                        </PaginationLink>
+                    </PaginationItem>
+                    <PaginationItem
+                        className={`
+                                    ${
+                                        parseInt(page) === 1
+                                            ? "pointer-events-none text-slate-400"
+                                            : ""
+                                    }
+                                `}
+                    >
+                        <PaginationPrevious
+                            href={
+                                parseInt(page) === 1
+                                    ? `/app/${keyid}/files?page=${Number(page)}`
+                                    : `/app/${keyid}/files?page=${
+                                          Number(page) - 1
+                                      }`
+                            }
+                        />
+                    </PaginationItem>
+                    <PaginationItem className="text-sm">
+                        <span className="font-bold">{page}</span> of{" "}
+                        {totalPages} ({medias.length} Files)
+                    </PaginationItem>
+                    <PaginationItem
+                        className={`
+                                    ${
+                                        parseInt(page) === totalPages
+                                            ? "pointer-events-none text-slate-400"
+                                            : ""
+                                    }
+                                `}
                     >
-                        Previous
-                    </Button>
-                </Link>
-                <p>
-                    <span className="font-bold">{page}</span> of {totalPages} (
-                    {medias.length} Files)
-                </p>
-                <Link href={`/app/${keyid}/files?page=${Number(page) + 1}`}>
-                    <Button
-                        disabled={page ? parseInt(page) >= totalPages : true}
-                        className={
-                            page
-                                ? parseInt(page) >= totalPages
-                                    ? "!bg-muted-foreground"
-                                    : ""
+                        <PaginationNext
+                            href={`/app/${keyid}/files?page=${
+                                Number(page) + 1
+                            }`}
+                        />
+                    </PaginationItem>
+                    <PaginationItem>
+                        <PaginationLink
+                            href={`/app/${keyid}/files?page=${totalPages}`}
+                            className={`
+                        ${
+                            parseInt(page) === totalPages
+                                ? "pointer-events-none text-slate-400"
                                 : ""
                         }
-                    >
-                        {" "}
-                        Next{" "}
-                    </Button>
-                </Link>
-            </div>
+                    `}
+                        >
+                            <DoubleArrowRightIcon className="h-4 w-4" />
+                        </PaginationLink>
+                    </PaginationItem>
+                </PaginationContent>
+            </Pagination>
         </>
     );
 }
diff --git a/apps/web/components/ui/pagination.tsx b/apps/web/components/ui/pagination.tsx
new file mode 100644
index 00000000..27034588
--- /dev/null
+++ b/apps/web/components/ui/pagination.tsx
@@ -0,0 +1,117 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { ButtonProps, buttonVariants } from "@/components/ui/button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+    <nav
+        role="navigation"
+        aria-label="pagination"
+        className={cn("mx-auto flex w-full justify-center", className)}
+        {...props}
+    />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<
+    HTMLUListElement,
+    React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+    <ul
+        ref={ref}
+        className={cn("flex flex-row items-center gap-1", className)}
+        {...props}
+    />
+));
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<
+    HTMLLIElement,
+    React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+    React.ComponentProps<"a">;
+
+const PaginationLink = ({
+    className,
+    isActive,
+    size = "icon",
+    ...props
+}: PaginationLinkProps) => (
+    <a
+        aria-current={isActive ? "page" : undefined}
+        className={cn(
+            buttonVariants({
+                variant: isActive ? "outline" : "ghost",
+                size,
+            }),
+            className
+        )}
+        {...props}
+    />
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+    className,
+    ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+    <PaginationLink
+        aria-label="Go to previous page"
+        size="default"
+        className={cn("gap-1 pl-2.5", className)}
+        {...props}
+    >
+        <ChevronLeft className="h-4 w-4" />
+        <span>Previous</span>
+    </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({
+    className,
+    ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+    <PaginationLink
+        aria-label="Go to next page"
+        size="default"
+        className={cn("gap-1 pr-2.5", className)}
+        {...props}
+    >
+        <span>Next</span>
+        <ChevronRight className="h-4 w-4" />
+    </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({
+    className,
+    ...props
+}: React.ComponentProps<"span">) => (
+    <span
+        aria-hidden
+        className={cn("flex h-9 w-9 items-center justify-center", className)}
+        {...props}
+    >
+        <MoreHorizontal className="h-4 w-4" />
+        <span className="sr-only">More pages</span>
+    </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+    Pagination,
+    PaginationContent,
+    PaginationEllipsis,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious,
+};