demeter

 1import { ChevronLeft, ChevronRight } from "lucide-react";
 2
 3export default function Pagination({
 4  page,
 5  totalPages,
 6  setPage,
 7  style = {},
 8  className = "",
 9}) {
10  if (totalPages <= 1) return null;
11  return (
12    <div
13      className={className}
14      style={{
15        display: "flex",
16        justifyContent: "center",
17        alignItems: "center",
18        gap: 8,
19        marginTop: 20,
20        ...style,
21      }}
22    >
23      <button
24        onClick={() => setPage((p) => Math.max(1, p - 1))}
25        disabled={page === 1}
26        style={{
27          width: 32,
28          height: 32,
29          borderRadius: 8,
30          cursor: page === 1 ? "not-allowed" : "pointer",
31          background: "var(--surface)",
32          border: "1px solid var(--border)",
33          color: page === 1 ? "var(--text-3)" : "var(--text-2)",
34          display: "flex",
35          alignItems: "center",
36          justifyContent: "center",
37        }}
38      >
39        <ChevronLeft size={14} />
40      </button>
41
42      {Array.from({ length: totalPages }, (_, i) => i + 1).map((n) => (
43        <button
44          key={n}
45          onClick={() => setPage(n)}
46          style={{
47            width: 32,
48            height: 32,
49            borderRadius: 8,
50            cursor: "pointer",
51            fontFamily: "DM Mono, monospace",
52            fontSize: 12,
53            background: n === page ? "var(--green)" : "var(--surface)",
54            border: `1px solid ${n === page ? "transparent" : "var(--border)"}`,
55            color: n === page ? "var(--btn-on-green)" : "var(--text-2)",
56            fontWeight: n === page ? 700 : 400,
57          }}
58        >
59          {n}
60        </button>
61      ))}
62
63      <button
64        onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
65        disabled={page === totalPages}
66        style={{
67          width: 32,
68          height: 32,
69          borderRadius: 8,
70          cursor: page === totalPages ? "not-allowed" : "pointer",
71          background: "var(--surface)",
72          border: "1px solid var(--border)",
73          color: page === totalPages ? "var(--text-3)" : "var(--text-2)",
74          display: "flex",
75          alignItems: "center",
76          justifyContent: "center",
77        }}
78      >
79        <ChevronRight size={14} />
80      </button>
81    </div>
82  );
83}