Pagination

1"use client";
2
3import { useState } from "react";
4import { Pagination } from "@/components/wensity/pagination";
5
6export function PaginationDefault() {
7  const [page, setPage] = useState(1);
8  return <Pagination page={page} totalPages={10} onPageChange={setPage} />;
9}

1"use client";
2
3import { useState } from "react";
4import { Pagination } from "@/components/wensity/pagination";
5
6export function PaginationCompact() {
7  const [page, setPage] = useState(1);
8  return <Pagination variant="compact" page={page} totalPages={10} onPageChange={setPage} />;
9}

1"use client";
2
3import { useState } from "react";
4import { Pagination } from "@/components/wensity/pagination";
5
6export function PaginationWithFirstLast() {
7  const [page, setPage] = useState(5);
8  return <Pagination variant="with-first-last" page={page} totalPages={20} onPageChange={setPage} />;
9}

 1"use client";
 2
 3import { useState } from "react";
 4import { Pagination } from "@/components/wensity/pagination";
 5
 6export function PaginationLoadMore() {
 7  const [count, setCount] = useState(10);
 8  const [loading, setLoading] = useState(false);
 9  return (
10    <Pagination
11      variant="load-more"
12      page={1}
13      totalPages={5}
14      onPageChange={() => {}}
15      isLoading={loading}
16      hasMore={count < 50}
17      onLoadMore={() => {
18        setLoading(true);
19        setTimeout(() => { setCount(c => Math.min(c + 10, 50)); setLoading(false); }, 1500);
20      }}
21      loadedCount={count}
22      totalCount={50}
23    />
24  );
25}