garden/src/components/Pagination.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import { Show } from "solid-js";

interface PaginationProps {
  page: number;
  totalPages: number;
  total: number;
  label: string;
  onPage: (page: number) => void;
}

export default function Pagination(props: PaginationProps) {
  return (
    <Show when={props.totalPages > 1}>
      <div class="council-pagination">
        <button
          type="button"
          class="council-page-btn"
          disabled={props.page <= 1}
          onClick={() => props.onPage(props.page - 1)}
        >
          Prev
        </button>
        <span class="council-page-info">
          Page {props.page} of {props.totalPages} ({props.total} {props.label})
        </span>
        <button
          type="button"
          class="council-page-btn"
          disabled={props.page >= props.totalPages}
          onClick={() => props.onPage(props.page + 1)}
        >
          Next
        </button>
      </div>
    </Show>
  );
}