astro_avtourist/frontend/src/components/blog/BlogPagination.astro

---
export interface Props {
  currentPage: number;
  totalPages: number;
}

const { currentPage, totalPages } = Astro.props;

const getPages = () => {
  const pages: (number | string)[] = [];
  for (let i = 1; i <= totalPages; i++) {
    if (i === 1 || i === totalPages || (i >= currentPage - 1 && i <= currentPage + 1)) {
      pages.push(i);
    } else if (pages[pages.length - 1] !== '...') {
      pages.push('...');
    }
  }
  return pages;
};
---

<nav class="blog-pagination animate-on-scroll" data-animation="fade-up">
  <div class="pagination-wrapper">
    <!-- Кнопка Назад -->
    <a
      href={currentPage > 1 ? `/blog/page/${currentPage - 1}` : '#'}
      class={`pagination-btn prev ${currentPage === 1 ? 'disabled' : ''}`}
      aria-disabled={currentPage === 1}
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="m15 18-6-6 6-6"/>
      </svg>
    </a>

    <!-- Номера страниц -->
    <div class="pagination-pages">
      {getPages().map((page) => (
        page === '...' ? (
          <span class="pagination-ellipsis">…</span>
        ) : (
          <a
            href={page === 1 ? '/blog' : `/blog/page/${page}`}
            class={`pagination-page ${page === currentPage ? 'active' : ''}`}
            aria-current={page === currentPage ? 'page' : undefined}
          >
            {page}
          </a>
        )
      ))}
    </div>

    <!-- Кнопка Вперед -->
    <a
      href={currentPage < totalPages ? `/blog/page/${currentPage + 1}` : '#'}
      class={`pagination-btn next ${currentPage === totalPages ? 'disabled' : ''}`}
      aria-disabled={currentPage === totalPages}
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="m9 18 6-6-6-6"/>
      </svg>
    </a>
  </div>
</nav>

<style>
  .blog-pagination {
    padding: 3rem 0 4rem;
    display: flex;
    justify-content: center;
  }

  .pagination-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
  }

  .pagination-btn:not(.disabled):hover {
    border-color: #d4af37;
    color: #d4af37;
    transform: translateY(-2px);
  }

  .pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .pagination-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    border: 2px solid transparent;
    background: #ffffff;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .pagination-page:hover {
    border-color: #d4af37;
    color: #d4af37;
  }

  .pagination-page.active {
    background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%);
    border-color: #d4af37;
    color: #1e293b;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
  }

  .pagination-ellipsis {
    color: #94a3b8;
    padding: 0 0.25rem;
    font-size: 1.25rem;
    user-select: none;
  }

  /* Анимации */
  .animate-on-scroll {
    opacity: 0;
    will-change: opacity, transform;
  }

  [data-animation="fade-up"] {
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  @media (max-width: 640px) {
    .pagination-pages {
      gap: 0.25rem;
    }

    .pagination-page,
    .pagination-btn {
      width: 2.25rem;
      height: 2.25rem;
      min-width: 2.25rem;
    }
  }
</style>