MicroClub Pagination

1import * as React from 'react';
2import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
3 
4import { cn } from '@/lib/utils';
5import { Button as ButtonPrimitive } from '@base-ui/react/button';
6 
7function McPagination({ className, ...props }: React.ComponentProps<'nav'>) {
8  return (
9    <nav
10      role="navigation"
11      aria-label="pagination"
12      data-slot="pagination"
13      className={cn('mx-auto flex w-full justify-center', className)}
14      {...props}
15    />
16  );
17}
18 
19function McPaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {
20  return (
21    <ul
22      data-slot="pagination-content"
23      className={cn('flex items-center gap-4 p-4', className)}
24      {...props}
25    />
26  );
27}
28 
29function McPaginationItem({ ...props }: React.ComponentProps<'li'>) {
30  return <li className="" data-slot="pagination-item" {...props} />;
31}
32 
33type PaginationLinkProps = {
34  isActive?: boolean;
35  isRounded?: boolean;
36} & React.ComponentProps<'a'>;
37 
38function McPaginationLink({
39  className,
40  isActive,
41  isRounded,
42 
43  ...props
44}: PaginationLinkProps) {
45  return (
46    <ButtonPrimitive
47      className={cn(
48        'group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 flex items-center rounded-[6px] px-4 py-2 hover:bg-secondary paragraph-md font-normal justify-center gap-2 font-sans',
49 
50        isActive &&
51          'rounded-[6px] bg-primary px-4 py-2 text-md font-dm-sans h-min-[40px] w-min-[37px] pointer-events-none cursor-default text-primary-foreground hover:bg-primary hover:text-primary-foreground active:bg-primary active:text-primary-foreground active:ring-0',
52        isRounded && 'rounded-full',
53        className
54      )}
55      nativeButton={false}
56      render={
57        <a
58          aria-current={isActive ? 'page' : undefined}
59          data-slot="pagination-link"
60          data-active={isActive}
61          {...props}
62        />
63      }
64    />
65  );
66}
67 
68function McPaginationPrevious({
69  className,
70  text = 'Back',
71  showText = true,
72 
73  ...props
74}: React.ComponentProps<typeof McPaginationLink> & { text?: string; showText?: boolean }) {
75  return (
76    <McPaginationLink
77      aria-label="Go to previous page"
78      className={cn('pl-1.5!', className)}
79      {...props}
80    >
81// … truncated