Pagination

1'use client';
2 
3import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
4import { ComponentProps, createContext, useContext } from 'react';
5 
6import { Label2 } from '@/components/ui/typography';
7import { cn } from '@/lib/utils';
8 
9type TPaginationSize = 'sm' | 'md' | 'lg';
10type TPaginationVariant = 'default' | 'flat';
11 
12const PAGINATION_CONTEXT = createContext<{ size: TPaginationSize; variant: TPaginationVariant }>({
13  size: 'md',
14  variant: 'default',
15});
16 
17/** Navigation pagination component. */
18function Pagination({
19  className,
20  size = 'md',
21  variant = 'default',
22  ...props
23}: ComponentProps<'nav'> & { size?: TPaginationSize; variant?: TPaginationVariant }) {
24  return (
25    <PAGINATION_CONTEXT.Provider value={{ size, variant }}>
26      <nav
27        role='navigation'
28        aria-label='pagination'
29        className={cn('mx-auto flex w-full justify-center', className)}
30        {...props}
31      />
32    </PAGINATION_CONTEXT.Provider>
33  );
34}
35 
36/** Container list for pagination items. */
37function PaginationContent({ className, ...props }: ComponentProps<'ul'>) {
38  const { variant } = useContext(PAGINATION_CONTEXT);
39 
40  return (
41    <ul
42      className={cn(
43        'flex list-none flex-row items-center pl-0',
44        variant === 'flat'
45          ? 'gap-1.5'
46          : // The `first:`/`last:` Tailwind selectors compile to :first-child/:last-child.
47            // Each <a> is the only child of its <li>, so applying them on the link
48            // matches every link. Apply them at the <ul> level via descendant
49            // selectors so only the actual edge items get rounded corners.
50            'gap-0 [&>li:first-child>*]:rounded-l-md [&>li:last-child>*]:rounded-r-md',
51        className,
52      )}
53      {...props}
54    />
55  );
56}
57 
58/** Single pagination list item wrapper. */
59function PaginationItem({ className, ...props }: ComponentProps<'li'>) {
60  return <li className={cn('list-none', className)} {...props} />;
61}
62 
63interface IPaginationLinkProps extends ComponentProps<'a'> {
64  isActive?: boolean;
65  disabled?: boolean;
66  size?: TPaginationSize;
67  variant?: TPaginationVariant;
68}
69 
70const PAGINATION_SIZE_CLASSES: Record<TPaginationVariant, Record<TPaginationSize, string>> = {
71  default: {
72    sm: 'px-2 py-1 text-sm',
73    md: 'px-3 py-1.5 text-base',
74    lg: 'px-6 py-3 text-lg',
75  },
76  flat: {
77    sm: 'size-7 text-sm',
78    md: 'size-8 text-base',
79    lg: 'size-10 text-lg',
80  },
81};
82 
83/** UX4G-style page link with default and flat variants. */
84// … truncated