Pagination

SSR-only pagination for listing pages — plain <a> links with page-number math, ellipsis collapsing, and prev/next labels.

Navigation

First page

Middle page (both-side ellipsis)

Last page

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for the OLD-tree (components/list/) SSR Pagination — new coverage // (epic #1647, wave 6 / #1660). See src/components/shared/pagination.stories.tsx // for the sibling story + the twin-note on the page-1 URL trailing-slash difference // between the two. This one appears to have no remaining production importers // (superseded by the src/ port) — flagged in the wave report rather than removed, // since story authoring is out of scope for a code-deletion decision. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { Pagination } from './pagination'; const meta: StoryMeta = { title: 'Pagination', category: 'Navigation', description: 'SSR-only pagination for listing pages — plain <a> links with page-number math, ellipsis collapsing, and prev/next labels.', usage: `import { Pagination } from '@/components/list/pagination';\n\n<Pagination currentPage={1} totalPages={12} basePath="/notes" />`, }; export default meta; export const FirstPage = defineStory({ name: 'First page', render: () => <Pagination currentPage={1} totalPages={12} basePath="/notes" />, }); export const MiddlePageWithEllipsis = defineStory({ name: 'Middle page (both-side ellipsis)', render: () => <Pagination currentPage={6} totalPages={12} basePath="/notes" />, }); export const LastPage = defineStory({ name: 'Last page', render: () => <Pagination currentPage={12} totalPages={12} basePath="/notes" />, });