Graybyt3 Was Here

Linux vps-4656817-x.dattaweb.com 5.14.0-570.33.2.el9_6.x86_64 #1 SMP PREEMPT_DYNAMIC Thu Aug 14 07:37:35 EDT 2025 x86_64
Apache
200.58.107.103

File Name : Pagination.astro

---
import { ChevronLeftIcon } from '@/icons/ChevronLeftIcon'
import { ChevronRightIcon } from '@/icons/ChevronRightIcon'
interface Props {
	pageCount: number
	currentPage: number
	href: string
	identifier?: string
	mode?: 'query' | 'path'
}
const { currentPage, pageCount, href, identifier, mode } = Astro.props
/**
 * Genera una URL para paginación a partir de la URL base (`href`), el número de página,
 * un identificador de la paginación (`identifier`) y el modo (`mode`).
 * - Si `mode` es 'query', manejará la paginación a través de parámetros de consulta (ej. ?page=2).
 * - Si `mode` es 'path', manejará la paginación usando la ruta (ej. /page/2).
 */
const generatePaginationUrl = ({
	href,
	pageNumber,
	identifier = 'page',
	mode = 'query'
}: {
	href: string
	pageNumber: number
	identifier?: string
	mode?: 'query' | 'path'
}): string => {
	const url = new URL(href)
	const pathSegments = url.pathname.split('/').filter(Boolean)

// Define los manejadores de cada modo
	const handlers = {
		query: () => {
			// Si el número de página es 1, eliminamos el parámetro (para evitar ?page=1).
			// De lo contrario, establecemos el parámetro con el valor de pageNumber.
			if (pageNumber === 1) {
				url.searchParams.delete(identifier)
			} else {
				url.searchParams.set(identifier, pageNumber.toString())
			}
			return url
		},
		path: () => {
			const identifierIndex = pathSegments.findIndex((segment) => segment === identifier)
			const hasIdentifier = identifierIndex !== -1

// Si es la página 1 y existe el segmento "page", se elimina junto con su número (ej. /page/2).
			if (pageNumber === 1 && hasIdentifier) {
				pathSegments.splice(identifierIndex, 2)
			}
			// Si existe el identificador, significa que la URL ya contiene /page/{num},
			// así que se reemplaza el número de la página por el nuevo valor.
			else if (hasIdentifier) {
				// El número de página se encuentra justo después del segmento "page"
				pathSegments[identifierIndex + 1] = pageNumber.toString()
			}
			// Si la página es mayor que 1 y no existe el identificador, se agrega al final de la ruta
			// (ej. /page/2).
			else if (pageNumber > 1) {
				pathSegments.push(identifier, pageNumber.toString())
			}

// Reconstruye la ruta con los segmentos modificados
			url.pathname = `/${pathSegments.join('/')}`
			return url
		}
	}

// Ejecutamos la función que corresponde al modo indicado y convertimos a string
	return handlers[mode]().toString()
}
function getPaginationPages(currentPage: number, totalPages: number) {
	// Si solo hay una página, retorna un array con esa única página
	if (totalPages === 1 || totalPages === 0) {
		return [1]
	}

// Define el rango de páginas a mostrar alrededor de la página actual.
	const delta = 1
	const range = [] // Lista que almacena las páginas a mostrar.
	const rangeWithDots = [] // Lista final que incluye puntos suspensivos cuando hay saltos.
	let lastPageInRange // Variable que almacena la última página añadida al rango.

// Siempre incluye la primera página en el rango
	range.push(1)

// Agrega páginas en un rango alrededor de la página actual
	for (let i = currentPage - delta; i <= currentPage + delta; i++) {
		// Solo agrega las páginas que están entre la primera y la última página
		if (i >= 2 && i <= totalPages - 1) {
			range.push(i)
		}
	}

// Incluye siempre la última página en el rango
	range.push(totalPages)

// Genera el rango final con puntos suspensivos cuando hay saltos en la secuencia
	for (let i of range) {
		if (lastPageInRange) {
			// Si hay una diferencia de dos entre las páginas, añade la página intermedia
			if (i - lastPageInRange === 2) {
				rangeWithDots.push(lastPageInRange + 1)
			}
			// Si hay una diferencia mayor, añade puntos suspensivos
			else if (i - lastPageInRange !== 1) {
				rangeWithDots.push('...')
			}
		}
		// Añade la página actual y actualiza la última página añadida al rango
		rangeWithDots.push(i)
		lastPageInRange = i
	}

return rangeWithDots
}

const pages: (string | number)[] = getPaginationPages(currentPage, pageCount)
---

<div class="flex items-center overflow-x-auto">
	<nav class="mx-auto flex items-center gap-2">
		
		
		<a
			href={generatePaginationUrl({
				href,
				pageNumber: Math.max(currentPage - 1, 1),
				identifier,
				mode
			})}
			class="text-md flex h-8 w-8 items-center justify-center rounded-full bg-yellow-400/20 font-bold text-neutral-950 transition-colors hover:bg-yellow-400/40 aria-disabled:pointer-events-none aria-disabled:opacity-50 sm:h-12 sm:w-12 sm:text-xl"
			aria-disabled={currentPage === 1}
		>
			<ChevronLeftIcon className="text-[8px] sm:text-[12px]" />
		</a>
		{
			pages.map((page) => {
				if (page === '...') {
					return <span>...</span>
				}
				const isActive = page === currentPage
				return (
					<>
						{isActive ? (
							<span
								class="text-md flex h-8 w-8 items-center justify-center rounded-full bg-yellow-400 font-bold text-neutral-950 sm:h-12 sm:w-12 sm:text-xl"
								aria-current="page"
							>
								{page}
							</span> // href={`${pathname}?page=${page}${hash ? `#${hash}` : ''}`}
						) : (
							<a
								href={generatePaginationUrl({
									href,
									pageNumber: Number(page),
									identifier,
									mode
								})}
								class="text-md flex h-8 w-8 items-center justify-center rounded-full bg-yellow-400/20 font-bold text-neutral-950 transition-colors hover:bg-yellow-400/40 sm:h-12 sm:w-12 sm:text-xl"
							>
								{page}
							</a>
						)}
					</>
				)
			})
		}
		
		
		<a
			href={generatePaginationUrl({
				href,
				pageNumber: Math.min(currentPage + 1, pageCount),
				identifier,
				mode
			})}
			class="text-md flex h-8 w-8 items-center justify-center rounded-full bg-yellow-400/20 font-bold text-neutral-950 transition-colors hover:bg-yellow-400/40 aria-disabled:pointer-events-none aria-disabled:opacity-50 sm:h-12 sm:w-12 sm:text-xl"
			aria-disabled={currentPage === pageCount}
		>
			<ChevronRightIcon className="text-[8px] sm:text-[12px]" />
		</a>
	</nav>
</div>

System Information
*ReClick For Close
File : BlackDragon /acciones/about.php

Name	Type	Size	Owner/Group	Permission	Last Modified	Actions
.	dir	-	bienesraicess/bienesraicess	0755	2025-07-18 03:22:16
..	dir	-	bienesraicess/bienesraicess	0755	2025-07-18 03:22:16
Header	dir	-	bienesraicess/bienesraicess	0755	2025-07-18 03:22:16
BasicModal.tsx	file	3.93 KB	bienesraicess/bienesraicess	0644	2025-07-18 03:22:16
ChatsWhatsapp.astro	file	8.99 KB	bienesraicess/bienesraicess	0644	2025-07-18 03:22:16
Footer.astro	file	4.51 KB	bienesraicess/bienesraicess	0644	2025-07-18 03:22:16
GoogleMap.tsx	file	977 B	bienesraicess/bienesraicess	0644	2025-07-18 03:22:16
HeaderBlog.astro	file	5.69 KB	bienesraicess/bienesraicess	0644	2025-07-18 03:22:16
Heading.tsx	file	1.18 KB	bienesraicess/bienesraicess	0644	2025-07-18 03:22:16
LiteTiktok.astro	file	2.25 KB	bienesraicess/bienesraicess	0644	2025-07-18 03:22:16
LiteYouTube.astro	file	13.59 KB	bienesraicess/bienesraicess	0644	2025-07-18 03:22:16
Pagination.astro	file	6.18 KB	bienesraicess/bienesraicess	0644	2025-07-18 03:22:16
SEO.astro	file	3.27 KB	bienesraicess/bienesraicess	0644	2025-07-18 03:22:16
SEOSimple.astro	file	2.71 KB	bienesraicess/bienesraicess	0644	2025-02-01 04:40:11
TypographyH1.tsx	file	736 B	bienesraicess/bienesraicess	0644	2025-07-18 03:22:16
TypographyH2.tsx	file	736 B	bienesraicess/bienesraicess	0644	2025-07-18 03:22:16
TypographyH3.tsx	file	736 B	bienesraicess/bienesraicess	0644	2025-07-18 03:22:16