Posts.astro

---
import type { CollectionEntry } from 'astro:content';
import { site } from '~/utils/config';
import Layout from './Layout.astro';
import Header from '~/components/Header.astro';
import Main from './Main.astro';
import Link from '~/components/Link.astro';
import Card from '~/components/Card.astro';
import Footer from '~/components/Footer.astro';

export interface Props {
  pageNum: number;
  totalPages: number;
  posts: CollectionEntry<'blogs'>[];
}

const { pageNum, totalPages, posts } = Astro.props;

const prev = pageNum > 1 ? '' : 'disabled';
const next = pageNum < totalPages ? '' : 'disabled';
---

<Layout title={`Posts | ${site.title}`}>
  <Header activeNav="posts" />
  <Main pageTitle="Posts" pageDesc="What I've learned so far.">
    <ul>
      {
        posts.map(({ data, slug }) => (
          <Card href={`/blog/${slug}`} frontmatter={data} {slug} />
        ))
      }
    </ul>
  </Main>

  {
    totalPages > 1 ? (
      <nav class="pagination-wrapper" aria-label="Pagination">
        {pageNum === 1 ? null : (
          <Link
            disabled={prev === 'disabled'}
            href={`/blog${pageNum - 1 !== 1 ? '/' + (pageNum - 1) : ''}`}
            className={`mr-4 select-none ${prev}`}
            ariaLabel="Previous"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class={`${prev}-svg`}>
              <path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z" />
            </svg>
            Prev
          </Link>
        )}
        {pageNum === totalPages ? null : (
          <Link
            disabled={next === 'disabled'}
            href={`/blog/${pageNum + 1}`}
            className={`ml-4 select-none ${next}`}
            ariaLabel="Next"
          >
            Next
            <svg xmlns="http://www.w3.org/2000/svg" class={`${next}-svg`}>
              <path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z" />
            </svg>
          </Link>
        )}
      </nav>
    ) : null
  }
  <Footer noMarginTop={totalPages > 1} />
</Layout>

<style>
  .pagination-wrapper {
    @apply mb-8 mt-auto flex justify-center;
  }
  .disabled {
    @apply pointer-events-none select-none opacity-50 hover:text-skin-base group-hover:fill-skin-base;
  }
  .disabled-svg {
    @apply group-hover:!fill-skin-base;
  }
</style>