1
import { Button } from "@/client/components/ui/button";
2
 
3
type PagerLink = {
4
  text: string;
5
  href: string;
6
};
7
 
8
type PagerModel = {
9
  perPageLinks: PagerLink[];
10
  newerHref?: string;
11
  olderHref?: string;
12
};
13
 
14
type PagerProps = {
15
  pager?: PagerModel | null;
16
};
17
 
18
export function Pager({ pager }: PagerProps) {
19
  if (!pager) {
20
    return null;
21
  }
22
 
23
  return (
24
    <div className="my-6 flex items-center justify-between rounded-xl bg-zinc-100 dark:bg-zinc-800/30 p-4">
25
      <div className="flex items-center gap-3 text-sm">
26
        <span className="py-1 text-zinc-600 dark:text-zinc-400">Per page:</span>
27
        {pager.perPageLinks.map((link) => (
28
          <a
29
            key={link.href}
30
            href={link.href}
31
            className="rounded-sm px-2 py-1 transition-colors hover:bg-zinc-200 dark:hover:bg-zinc-700"
32
          >
33
            {link.text}
34
          </a>
35
        ))}
36
      </div>
37
      <div className="flex gap-3">
38
        {pager.newerHref ? (
39
          <Button variant="secondary" size="sm" href={pager.newerHref}>
40
            ← Newer
41
          </Button>
42
        ) : null}
43
        {pager.olderHref ? (
44
          <Button size="sm" href={pager.olderHref}>
45
            Older →
46
          </Button>
47
        ) : null}
48
      </div>
49
    </div>
50
  );
51
}