Twelve pages around the current one

// apps/docs/examples/ui/pagination.tsx'use client';
import {useState, type MouseEvent} from 'react';
import {  Pagination,  PaginationContent,  PaginationEllipsis,  PaginationItem,  PaginationLink,  PaginationNext,  PaginationPrevious,} from '@workspace/active-ui/components/primitives/pagination';
const PAGES = 12;
/** The page numbers to show: the first, the last, and the current with its neighbours. */function visiblePages(current: number): (number | 'gap')[] {  const pages: (number | 'gap')[] = [];  for (let page = 1; page <= PAGES; page++) {    if (page === 1 || page === PAGES || Math.abs(page - current) <= 1) {      pages.push(page);    } else if (pages.at(-1) !== 'gap') {      pages.push('gap');    }  }  return pages;}
/** * Links to the pages of a long list. Each link has a real `href` * (`?page=n`); this example keeps the page in state instead of navigating, * where an application would let the router follow the link. */export default function PaginationExample() {  const [page, setPage] = useState(5);  const go = (target: number) => (event: MouseEvent<HTMLAnchorElement>) => {    event.preventDefault();    setPage(target);  };  return (    <div className="flex flex-col items-center gap-3">      <Pagination label="Pages of participants">        <PaginationContent>          {page > 1 ? (            <PaginationItem>              <PaginationPrevious                href={`?page=${page - 1}`}                text="Previous"                label="Go to the previous page"                onClick={go(page - 1)}              />            </PaginationItem>          ) : null}          {visiblePages(page).map((entry, index) =>            entry === 'gap' ? (              <PaginationItem key={`gap-${index}`}>                <PaginationEllipsis />              </PaginationItem>            ) : (              <PaginationItem key={entry}>                <PaginationLink                  href={`?page=${entry}`}                  isActive={entry === page}                  aria-label={`Page ${entry}`}                  onClick={go(entry)}                >                  {entry}                </PaginationLink>              </PaginationItem>            ),          )}          {page < PAGES ? (            <PaginationItem>              <PaginationNext                href={`?page=${page + 1}`}                text="Next"                label="Go to the next page"                onClick={go(page + 1)}              />            </PaginationItem>          ) : null}        </PaginationContent>      </Pagination>      <p className="text-muted-foreground text-sm" aria-live="polite">        Page {page} of {PAGES}      </p>    </div>  );}