Inna
36a4354ff7
- lib/forum.ts: countTopics/countPosts + offset/limit en getTopics/getPosts (mismos límites que Django: FORUM_TOPICS_PER_PAGE=20, FORUM_POSTS_PER_PAGE=15). - components/Pagination.tsx: paginación reutilizable (ventana ±2, primera/última, prev/next) con enlaces ?page=N; no renderiza si solo hay una página. - Foro y tema aceptan ?page=N (clamp al rango válido). - El formulario de respuesta solo aparece en la última página; enlace a ella si no. - i18n: namespace Common (prev/next/page) + replyOnLastPage. Build OK. Sin datos de foro en acore_web (estado vacío correcto). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import { getTranslations } from 'next-intl/server'
|
|
import { Link } from '@/i18n/navigation'
|
|
|
|
/**
|
|
* Paginación por número de página. `hrefFor(p)` construye la ruta de cada página
|
|
* (p.ej. `/forum/5?page=2`). No renderiza nada si solo hay una página.
|
|
*/
|
|
export async function Pagination({
|
|
page,
|
|
totalPages,
|
|
hrefFor,
|
|
}: {
|
|
page: number
|
|
totalPages: number
|
|
hrefFor: (page: number) => string
|
|
}) {
|
|
if (totalPages <= 1) return null
|
|
const t = await getTranslations('Common')
|
|
|
|
// Ventana de páginas alrededor de la actual.
|
|
const from = Math.max(1, page - 2)
|
|
const to = Math.min(totalPages, page + 2)
|
|
const pages: number[] = []
|
|
for (let p = from; p <= to; p++) pages.push(p)
|
|
|
|
const cls = (active: boolean) =>
|
|
`inline-flex min-w-9 items-center justify-center rounded border px-2.5 py-1 text-sm ${
|
|
active
|
|
? 'border-nw-gold bg-nw-gold/15 font-semibold text-nw-gold-light'
|
|
: 'border-nw-border/60 text-nw-muted hover:border-nw-gold/60 hover:text-nw-gold-light'
|
|
}`
|
|
|
|
return (
|
|
<nav className="mt-6 flex flex-wrap items-center justify-center gap-1" aria-label="pagination">
|
|
{page > 1 && (
|
|
<Link href={hrefFor(page - 1)} className={cls(false)}>
|
|
← {t('prev')}
|
|
</Link>
|
|
)}
|
|
{from > 1 && (
|
|
<>
|
|
<Link href={hrefFor(1)} className={cls(false)}>
|
|
1
|
|
</Link>
|
|
{from > 2 && <span className="px-1 text-nw-muted">…</span>}
|
|
</>
|
|
)}
|
|
{pages.map((p) => (
|
|
<Link key={p} href={hrefFor(p)} className={cls(p === page)} aria-current={p === page ? 'page' : undefined}>
|
|
{p}
|
|
</Link>
|
|
))}
|
|
{to < totalPages && (
|
|
<>
|
|
{to < totalPages - 1 && <span className="px-1 text-nw-muted">…</span>}
|
|
<Link href={hrefFor(totalPages)} className={cls(false)}>
|
|
{totalPages}
|
|
</Link>
|
|
</>
|
|
)}
|
|
{page < totalPages && (
|
|
<Link href={hrefFor(page + 1)} className={cls(false)}>
|
|
{t('next')} →
|
|
</Link>
|
|
)}
|
|
</nav>
|
|
)
|
|
}
|