Serach pagination improvements

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,26 @@ 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-4'>
+  <div>
+    Albums ({count}) {
+      count > take ? (
+        <span> / Showing {page === 1 ? `first ${take}` : `${(page - 1) * take}-${Math.min(page * take, count)}`} results</span>
+      ) : null
+    }
+  </div>
+  <div class='flex gap-x-2'>
+    {
+      Array.from({ length: Math.ceil(count / take) }, (_, i) =>
+        page === i + 1 ? <span>{i + 1}</span> : <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) => (

src/pages/search.astro

@@ -3,6 +3,8 @@ import AlbumSearch from 'components/search/AlbumSearch.astro'
 import BaseLayout from 'layouts/base.astro'
 
 const query = Astro.url.searchParams.get('q')
+const page = Astro.url.searchParams.get('page') || "1"
+
 if (!query) return Astro.redirect(404)
 ---
 
@@ -11,7 +13,7 @@ if (!query) return Astro.redirect(404)
     <div class='flex max-w-[1200px] mx-auto justify-center px-8 py-3 flex-col'>
       <div class='py-4 px-4 bg-gray text-3xl text- w-full font-normal mt-2'>Search results for: {query}</div>
       <div class='mt-5'>
-        <AlbumSearch query={query} />
+        <AlbumSearch query={query} page={parseInt(page)} />
       </div>
     </div>
   </div>