From 563251f8c6a75b82f43146dcc71ed66bcc53e112 Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Sat, 16 Nov 2024 09:01:00 +0700
Subject: [PATCH] update: component pagination assessment shadcn, add border on
 icon chevron right and left

---
 .../components/ui/pagination-assessment.tsx   | 52 +++++--------------
 1 file changed, 14 insertions(+), 38 deletions(-)

diff --git a/apps/frontend/src/shadcn/components/ui/pagination-assessment.tsx b/apps/frontend/src/shadcn/components/ui/pagination-assessment.tsx
index 0000201..0d97584 100644
--- a/apps/frontend/src/shadcn/components/ui/pagination-assessment.tsx
+++ b/apps/frontend/src/shadcn/components/ui/pagination-assessment.tsx
@@ -1,8 +1,6 @@
 import * as React from "react"
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
-
 import { cn } from "@/lib/utils"
-import { ButtonProps, buttonVariants } from "@/shadcn/components/ui/button"
 
 type PaginationProps = React.ComponentProps<"nav"> & {
     page: number
@@ -67,58 +65,37 @@ const PaginationItem = React.forwardRef<
 ))
 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
+}: React.ComponentProps<"a">) => (
+    <a
         aria-label="Go to previous page"
-        size="default"
-        className={cn("gap-1 pl-2.5", className)}
+        className={cn(
+            "inline-flex items-center justify-center p-1 border rounded-sm transition-all hover:bg-gray-200 hover:text-gray-700",
+            className
+        )}
         {...props}
     >
         <ChevronLeft className="h-4 w-4" />
-    </PaginationLink>
+    </a>
 )
 PaginationPrevious.displayName = "PaginationPrevious"
 
 const PaginationNext = ({
     className,
     ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-    <PaginationLink
+}: React.ComponentProps<"a">) => (
+    <a
         aria-label="Go to next page"
-        size="default"
-        className={cn("gap-1 pr-2.5", className)}
+        className={cn(
+            "inline-flex items-center justify-center p-1 border rounded-sm transition-all hover:bg-gray-200 hover:text-gray-700",
+            className
+        )}
         {...props}
     >
         <ChevronRight className="h-4 w-4" />
-    </PaginationLink>
+    </a>
 )
 PaginationNext.displayName = "PaginationNext"
 
@@ -142,7 +119,6 @@ export {
     PaginationContent,
     PaginationEllipsis,
     PaginationItem,
-    PaginationLink,
     PaginationNext,
     PaginationPrevious,
 }
\ No newline at end of file