apps/frontend/src/shadcn/components/ui/pagination-assessment.tsx

@@ -0,0 +1,148 @@
+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
+    totalPages: number
+    onPageChange: (newPage: number) => void
+    children?: React.ReactNode
+}
+
+const Pagination = ({
+    className,
+    page,
+    totalPages,
+    onPageChange,
+    children,
+    ...props
+}: PaginationProps) => (
+    <nav
+        role="navigation"
+        aria-label="pagination"
+        className={cn("mx-auto flex w-full flex-col items-center", className)}
+        {...props}
+    >
+        <PaginationContent className="flex items-center">
+            <PaginationItem>
+                <PaginationPrevious
+                    onClick={() => {
+                        if (page > 1) onPageChange(page - 1)
+                    }}
+                />
+            </PaginationItem>
+            <PaginationItem className="mx-1 flex items-center">
+                {children} {/* Render children here */}
+            </PaginationItem>
+            <PaginationItem>
+                <PaginationNext
+                    onClick={() => {
+                        if (page < totalPages) onPageChange(page + 1)
+                    }}
+                />
+            </PaginationItem>
+        </PaginationContent>
+    </nav>
+)
+
+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" />
+    </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}
+    >
+        <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,
+}