Implement search pagination

src/components/search/AlbumSearch.astro

@@ -7,10 +7,14 @@ import prismaClient from 'utils/prisma-client'
 
 interface Props {
   query: string
+  page: number
 }
 
 const take = 20
 const { query } = Astro.props
+let { page } = Astro.props
+
+if (page < 1) page = 1
 
 const queryString = query
   .toLowerCase()
@@ -32,11 +36,24 @@ const countQuery: Prisma.albumsCountArgs<DefaultArgs> = {
 
 const [count, search] = await Promise.all([
   prismaClient.albums.count(countQuery),
-  prismaClient.albums.findMany({ ...findQuery, take })
+  prismaClient.albums.findMany({ ...findQuery, take, skip: (page - 1) * take })
 ])
 ---
 
-<div class='text-xl'>Albums ({count}) {count > take ? `/ Showing first ${take} results` : null}</div>
+<div class='text-xl flex gap-x-2'>
+  <div>
+    Albums ({count}) {
+      count > take ? (
+        <span> / Showing {page === 1 ? `first ${take}` : `${(page - 1) * take}-${page * take}`} results</span>
+      ) : null
+    }
+  </div>
+  <div>
+    {Array.from({ length: Math.ceil(count / take) }, (_, i) => (
+      <a href={`/search?q=${query}&page=${i + 1}`}>{i + 1}</a>
+    ))}
+  </div>
+</div>
 <div class='grid sm:grid-cols-1 md:grid-cols-3 mt-1.5 gap-4'>
   {
     search.map((album) => (