pagination.astro

---
import { Code } from 'astro/components';
// We can use this too but will need to go grab a CSS theme
// import { Prism } from '@astrojs/prism';

import XElement from 'astro-xelement'

// import AgAlert from '../../lib/components/Alert.astro'

import BaseLayout from '../../layouts/BaseLayout.astro';

const { HContainer} = XElement;

---
  <BaseLayout>
    <div class="h3 mbs40">Pagination</div>
    <HContainer class="container">
      <p class="mbs24 mbe24">The <a href="https://github.com/agnosticui/agnosticui/agnostic-astro" target="_blank">agnostic-astro</a>
      package utilizes <a href="https://github.com/astro-community/xelement" target="_blank">XElement</a> under-the-hood in order to provide build-time
      <a href="https://docs.astro.build/en/core-concepts/astro-components/" target="_blank">Astro components</a>. These build-time components will help
      your project get closer to realizing a mostly <span class="quoted">no client-side runtime</span>…if you do it right, this should mean an all-green 100% Lighthouse performance score!
      Leverage the benefits of <a href="https://docs.astro.build/en/core-concepts/partial-hydration/#island-architecture" target="_blank">Islands architecture</a>
      by sending mostly server built <a href="https://github.com/agnosticui/agnosticui/agnostic-astro" target="_blank">agnostic-astro</a> components. Then,
      sprinkle client-hydrated ones only as needed.</p>
      <div class="h4 mbe24">Usage</div>
      <p class="mbe12">Ensure you've installed the <code>agnostic-astro</code> npm package
        (note this installs depedency <code>agnostic-css</code> as well):
        <Code code={`npm i agnostic-astro`} lang="bash" wrap />
      </p>
      <p class="mbs18 mbe12">and then import <code>common.min.css</code> from your &ldquo;base layout&rdquo; (you should only need to do this in once place as this is global CSS). This brings in
      the required CSS custom properties, reset, and properties:
        <Code code={`import 'agnostic-css/public/css-dist/common.min.css';`} lang="javascript" wrap />
      </p>
      <p class="mbs24 mbe12">Then you can import Astro Pagination component:
      <Code code={`import AgPagination from 'agnostic-astro/Pagination.astro';`} lang="javascript" wrap />
      </p>
      <p class="mbs24 mbe12">Here's the <a href="https://github.com/AgnosticUI/agnosticui/tree/master/agnostic-astro" target="_blank">agnostic-astro</a> Pagination component in use:</p>
      <Code code={`<tbd>TBD—coming soon ;-)</tbd>`} lang="html" wrap />
      <div class="mbe24" />
      <div>TBD</div>
    </HContainer>
  </BaseLayout>