update: component pagination assessment shadcn, add border on icon chevron right and left

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>) => (
+}: React.ComponentProps<"a">) => (
-    <PaginationLink
+    <a
         aria-label="Go to previous page"
-        size="default"
+        className={cn(
-        className={cn("gap-1 pl-2.5", className)}
+            "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>) => (
+}: React.ComponentProps<"a">) => (
-    <PaginationLink
+    <a
         aria-label="Go to next page"
-        size="default"
+        className={cn(
-        className={cn("gap-1 pr-2.5", className)}
+            "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,
 }