Glass Pagination

1import * as React from 'react';
2import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
3 
4import { cn } from '@/lib/utils';
5 
6function GlassPagination({ className, ...props }: React.ComponentProps<'nav'>) {
7  return <nav role="navigation" aria-label="pagination" className={cn('mx-auto flex w-full justify-center', className)} {...props} />;
8}
9 
10function GlassPaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {
11  return <ul className={cn('flex items-center gap-2', className)} {...props} />;
12}
13 
14function GlassPaginationItem({ ...props }: React.ComponentProps<'li'>) {
15  return <li {...props} />;
16}
17 
18const ghostCircle =
19  'grid size-9 place-items-center rounded-full border border-foreground/10 text-muted-foreground transition-colors hover:border-ruri hover:text-ruri dark:border-white/10 dark:hover:border-ruri-soft dark:hover:text-ruri-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background';
20 
21const activePill = 'font-medium border-transparent bg-ruri text-white dark:bg-ruri-soft dark:text-deep';
22 
23interface GlassPaginationLinkProps extends React.ComponentProps<'a'> {
24  isActive?: boolean;
25}
26 
27function GlassPaginationLink({ isActive, className, ...props }: GlassPaginationLinkProps) {
28  return (
29    <a
30      aria-current={isActive ? 'page' : undefined}
31      className={cn(ghostCircle, isActive && activePill, className)}
32      {...props}
33    />
34  );
35}
36 
37function GlassPaginationPrevious({ className, ...props }: React.ComponentProps<'a'>) {
38  return (
39    <a aria-label="Go to previous page" className={cn(ghostCircle, className)} {...props}>
40      <ChevronLeft className="size-4" />
41      <span className="sr-only">Previous</span>
42    </a>
43  );
44}
45 
46function GlassPaginationNext({ className, ...props }: React.ComponentProps<'a'>) {
47  return (
48    <a aria-label="Go to next page" className={cn(ghostCircle, className)} {...props}>
49      <ChevronRight className="size-4" />
50      <span className="sr-only">Next</span>
51    </a>
52  );
53}
54 
55function GlassPaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
56  return (
57    <span className={cn('grid size-9 place-items-center text-faint', className)} {...props}>
58      <MoreHorizontal className="size-4" />
59      <span className="sr-only">More pages</span>
60    </span>
61  );
62}
63 
64export {
65  GlassPagination,
66  GlassPaginationContent,
67  GlassPaginationItem,
68  GlassPaginationLink,
69  GlassPaginationPrevious,
70// … truncated