Pagination

1import * as React from "react";
2import { View, Text, Pressable } from "react-native";
3import { Feather } from "@expo/vector-icons";
4import { cn } from "@/lib/utils";
5 
6const Pagination = ({
7  className,
8  ...props
9}: React.ComponentProps<typeof View>) => (
10  <View
11    accessibilityRole="none"
12    accessibilityLabel="pagination"
13    className={cn("w-full justify-center items-center", className)}
14    {...props}
15  />
16);
17Pagination.displayName = "Pagination";
18 
19const PaginationContent = React.forwardRef<
20  View,
21  React.ComponentProps<typeof View>
22>(({ className, ...props }, ref) => (
23  <View
24    ref={ref}
25    className={cn("flex-row items-center justify-center gap-2", className)}
26    {...props}
27  />
28));
29PaginationContent.displayName = "PaginationContent";
30 
31const PaginationItem = React.forwardRef<
32  View,
33  React.ComponentProps<typeof View>
34>(({ className, ...props }, ref) => (
35  <View ref={ref} className={cn("", className)} {...props} />
36));
37PaginationItem.displayName = "PaginationItem";
38 
39type PaginationLinkProps = {
40  isActive?: boolean;
41  size?: "default" | "sm" | "lg" | "icon";
42  onPress?: () => void;
43  disabled?: boolean;
44} & React.ComponentProps<typeof Pressable>;
45 
46const PaginationLink = ({
47  className,
48  isActive,
49  size = "icon",
50  onPress,
51  disabled = false,
52  children,
53  ...props
54}: PaginationLinkProps) => {
55  // Different size variants for better touch targets on mobile
56  const getSizeStyles = () => {
57    switch (size) {
58      case "sm":
59        return "h-8 min-w-8 px-2";
60      case "lg":
61        return "h-12 min-w-12 px-3";
62      case "icon":
63        return "h-10 w-10";
64      default:
65        return "h-10 min-w-10 px-2.5";
66    }
67  };
68 
69  return (
70    <Pressable
71      accessibilityRole="button"
72      accessibilityState={{
73        selected: isActive,
74        disabled: disabled,
75      }}
76      className={cn(
77        "items-center justify-center rounded-md",
78        getSizeStyles(),
79        isActive
80          ? "bg-primary text-primary-foreground"
81          : "bg-background text-foreground",
82        isActive && "font-medium",
83        disabled && "opacity-50",
84        className
85      )}
86      onPress={disabled ? undefined : onPress}
87      disabled={disabled}
88      {...props}
89    >
90      {children}
91    </Pressable>
92  );
93};
94PaginationLink.displayName = "PaginationLink";
95 
96const PaginationPrevious = ({
97  className,
98  ...props
99}: React.ComponentProps<typeof PaginationLink>) => (
100  <PaginationLink size="default" className={cn("gap-1", className)} {...props}>
101// … truncated