NORY-41: add shadcn-ui pagination component

dashboard/package.json

@@ -20,7 +20,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.4",
     "@serwist/next": "^9.0.0-preview.21",

dashboard/src/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,
+};