Pagination

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { ChevronRight, ChevronLeft, Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function PaginationSection() {
29  const [page, setPage] = useState(3);
30  const totalPages = 8;
31
32  return (
33    <SectionCard title="Pagination" sourceSlug="/ui/source/ui-elements/pagination">
34      <div className="flex items-center gap-1">
35        <button onClick={() => setPage(Math.max(1, page - 1))} disabled={page === 1} className="flex size-10 items-center justify-center rounded-xl text-gray-500 hover:bg-gray-100 dark:hover:bg-white/5 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
36          <ChevronLeft className="size-4" />
37        </button>
38        {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
39          <button key={p} onClick={() => setPage(p)} className={`flex size-10 items-center justify-center rounded-xl text-sm font-medium transition-colors ${p === page ? 'bg-brand-500 text-white' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/5'}`}>
40            {p}
41          </button>
42        ))}
43        <button onClick={() => setPage(Math.min(totalPages, page + 1))} disabled={page === totalPages} className="flex size-10 items-center justify-center rounded-xl text-gray-500 hover:bg-gray-100 dark:hover:bg-white/5 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
44          <ChevronRight className="size-4" />
45        </button>
46      </div>
47    </SectionCard>
48  );
49}