Glass Pagination

'use client';

import './PaginationGlass.css';

/** PaginationGlass — ported from astro-component-kit. */
export interface PaginationGlassProps {
}

export function PaginationGlass({}: PaginationGlassProps) {
  return (
    <>
      <nav className="pagination" data-rk-96af1a="">
        <button className="prev" data-rk-96af1a="">←</button>
        <div className="pages" data-rk-96af1a="">
          <a href="#" className="active" data-rk-96af1a="">1</a>
          <a href="#" data-rk-96af1a="">2</a>
          <a href="#" data-rk-96af1a="">3</a>
          <span data-rk-96af1a="">...</span>
          <a href="#" data-rk-96af1a="">12</a>
        </div>
        <button className="next" data-rk-96af1a="">→</button>
      </nav>
    </>
  );
}

export default PaginationGlass;

/* PaginationGlass — ported from astro-component-kit (navigation/PaginationGlass.astro) */

.pagination:where([data-rk-96af1a]) { display: flex; align-items: center; gap: 1rem; }
.pages:where([data-rk-96af1a]) { display: flex; gap: 0.5rem; background: rgba(0,0,0,0.2); padding: 4px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); }
.pages:where([data-rk-96af1a]) a:where([data-rk-96af1a]), button:where([data-rk-96af1a]) { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; font-size: 0.8rem; font-weight: 700; color: #94a3b8; text-decoration: none; transition: 0.2s; border: none; background: none; cursor: pointer; }
.pages:where([data-rk-96af1a]) a.active:where([data-rk-96af1a]) { background: #6366f1; color: #fff; }
.pages:where([data-rk-96af1a]) a:hover:not(.active):where([data-rk-96af1a]) { background: rgba(255,255,255,0.05); color: #fff; }