Page controls

src/components/PageCtrlBtn.astro

@@ -0,0 +1,52 @@
+---
+import Icon from './Icon.astro';
+
+export interface Props {
+    btnKind: 'prev' | 'pagenum' | 'next';
+    url?: string | undefined;
+    num?: number;
+}
+
+const { btnKind, url, num = 1 } = Astro.props;
+---
+
+<a href={url ?? 'javascript:void(0)'} class={btnKind}>
+    {
+        btnKind === 'pagenum' ? <span class="pagenum">{num}</span> :
+        btnKind === 'prev' ? <Icon code="&#xf104;" /> :
+        btnKind === 'next' ? <Icon code="&#xf105;" /> :
+        ""
+    }
+</a>
+
+<style lang="less">
+    a {
+        @size: 1.1rem;
+        @color: var(--fg);
+
+        width: @size;
+        height: @size;
+        box-sizing: content-box;
+
+        font-size: @size;
+        padding: 0.625rem;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        color: @color;
+
+        &:hover {
+            color: @color;
+
+            background: var(--accent-bg);
+            border-radius: var(--bdrs);
+        }
+    }
+
+    .pagenum {
+        font-weight: 600;
+    }
+</style>

src/pages/blog/page[page].astro

@@ -1,8 +1,10 @@
 ---
 import BlogLayout from "../../layouts/BlogLayout.astro";
 import ArticleCard from "../../components/ArticleCard.astro";
+import PageCtrlBtn from "../../components/PageCtrlBtn.astro";
 
 import { getCollection } from "astro:content";
+import { Page } from "astro";
 
 export async function getStaticPaths({ paginate }) {
     const POSTS_ON_PAGE = 15;
@@ -19,7 +21,7 @@ export async function getStaticPaths({ paginate }) {
     return paginate(posts, { pageSize: POSTS_ON_PAGE });
 }
 
-const { page } = Astro.props;
+const page: Page = Astro.props.page;
 const description =
     "DarkCat09's blog. " +
     "Reading a QR code without a phone, " +
@@ -35,6 +37,11 @@ const description =
     <div id="articles">
         {page.data.map(({ post }) => <ArticleCard post={post} />)}
     </div>
+    <div id="page-ctrl">
+        <PageCtrlBtn btnKind="prev" url={page.url.prev} />
+        <PageCtrlBtn btnKind="pagenum" num={page.currentPage} />
+        <PageCtrlBtn btnKind="next" url={page.url.next} />
+    </div>
 </BlogLayout>
 
 <style lang="less">
@@ -46,4 +53,12 @@ const description =
         align-items: center;
         gap: @body-padding + @main-padding;
     }
+
+    #page-ctrl {
+        margin-top: 0.5rem;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
 </style>