Add pagination to last-added

src/pages/last-added/[...page].astro

@@ -0,0 +1,54 @@
+---
+import prismaClient from 'utils/prisma-client'
+import * as m from 'paraglide/messages'
+
+import BaseLayout from 'layouts/base.astro'
+import AlbumBox from 'components/AlbumBox.astro'
+import FooterNav from 'components/lastAdded/FooterNav.astro'
+
+const page = parseInt(Astro.params.page ?? '1')
+const take = 40
+const limitMD = 12
+const limitXS = 5
+
+if (page < 1) {
+  return Astro.redirect('/last-added')
+}
+
+const lastAlbums = await prismaClient.albums.findMany({
+  where: { status: 'show' },
+  select: { id: true, title: true },
+  take,
+  skip: take * (page - 1),
+  orderBy: { createdAt: 'desc' }
+})
+const count = await prismaClient.albums.count({ where: { status: 'show' } })
+
+if (lastAlbums.length === 0) {
+  return Astro.redirect('/404')
+}
+
+const fullPageList = [...Array(Math.ceil(count / take))].map((v, i) => i + 1)
+const listProps = { fullPageList, page }
+---
+
+<BaseLayout>
+  <div class='w-full min-h-100vh mx-auto max-w-[1440px]'>
+    <div class='px-2 mb-2'>
+      <h1 class='uppercase font-medium tracking-wide text-5xl drop-shadow-2xl mt-5 mb-2 text-center'>
+        {m.lastAdded()}
+      </h1>
+      <div class='grid grid-cols-4 gap-x-1.5'>
+        {
+          lastAlbums.map((album) => (
+            <AlbumBox title={album.title} href={`/album/${album.id}`} image={`/album/${album.id}.png`} />
+          ))
+        }
+      </div>
+    </div>
+    <nav class='bg-dark p-2'>
+      <FooterNav class='flex md:hidden' pageLimit={limitXS} {...listProps} client:visible />
+      <FooterNav class='hidden md:flex' pageLimit={limitMD} {...listProps} client:visible />
+    </nav>
+  </div>
+</BaseLayout>