Pagination

import * as React from "react";
const paginationFixture = {
  id: "pagination",
  page: 5,
  count: 9,
  siblingCount: 1,
} satisfies { id: string; page: number; count: number; siblingCount: number };
 
import { Pagination } from "@grassroot/ui-react";
 
export default function PaginationDemo() {
  const [page, setPage] = React.useState(paginationFixture.page);
  return (
    <div>
      <Pagination
        count={paginationFixture.count}
        page={page}
        siblingCount={paginationFixture.siblingCount}
        onPageChange={setPage}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
import { Pagination } from "@grassroot/ui-vue";
const paginationFixture = {
  id: "pagination",
  page: 5,
  count: 9,
  siblingCount: 1,
} satisfies { id: string; page: number; count: number; siblingCount: number };
 
const page = ref(paginationFixture.page);
</script>
 
<template>
  <div>
    <Pagination
      :page="page"
      :count="paginationFixture.count"
      :sibling-count="paginationFixture.siblingCount"
      @page-change="page = $event"
    />
  </div>
</template>

import { Component, signal } from "@angular/core";
import { GrassrootPagination } from "@grassroot/ui-angular";
const paginationFixture = {
  id: "pagination",
  page: 5,
  count: 9,
  siblingCount: 1,
} satisfies { id: string; page: number; count: number; siblingCount: number };
 
@Component({
  selector: "app-pagination-demo",
  standalone: true,
  imports: [GrassrootPagination],
  template: `
    <div>
      <grassroot-pagination
        [page]="page()"
        [count]="fixture.count"
        [siblingCount]="fixture.siblingCount"
        (pageChange)="page.set($event)"
      />
    </div>
  `,
})
export class PaginationDemoComponent {
  protected readonly fixture = paginationFixture;
  readonly page = signal(paginationFixture.page);
}
 
export default PaginationDemoComponent;

<script lang="ts">
  import { Pagination } from "@grassroot/ui-svelte";
  const paginationFixture = {
    id: "pagination",
    page: 5,
    count: 9,
    siblingCount: 1,
  } satisfies { id: string; page: number; count: number; siblingCount: number };
 
  let page = $state(paginationFixture.page);
</script>
 
<div>
  <Pagination
    {page}
    count={paginationFixture.count}
    siblingCount={paginationFixture.siblingCount}
    onPageChange={(next) => (page = next)}
  />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { Pagination } from "@grassroot/ui-solid";
const paginationFixture = {
  id: "pagination",
  page: 5,
  count: 9,
  siblingCount: 1,
} satisfies { id: string; page: number; count: number; siblingCount: number };
 
export default function PaginationDemo() {
  const [page, setPage] = createSignal(paginationFixture.page);
 
  return (
    <div>
      <Pagination
        page={page()}
        count={paginationFixture.count}
        siblingCount={paginationFixture.siblingCount}
        onPageChange={setPage}
      />
    </div>
  );
}