search update

src/components/search/AlbumSearch.astro

@@ -4,6 +4,7 @@ import type { DefaultArgs } from '@prisma/client/runtime/library'
 import { Image } from 'astro:assets'
 
 import prismaClient from 'utils/prisma-client'
+import SearchNav from './SearchNav.astro'
 
 interface Props {
   query: string
@@ -40,8 +41,7 @@ const [count, search] = await Promise.all([
 ])
 ---
 
-<div class='text-xl flex gap-x-4'>
+<div class='text-xl'>
-  <div>
   Albums ({count}) {
     count > take ? (
       <span>
@@ -52,12 +52,7 @@ const [count, search] = await Promise.all([
   }
 </div>
 <div class='flex gap-x-2'>
-    {
+  <SearchNav query={query} count={count} take={take} page={page} />
-      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 grid-cols-1 md:grid-cols-3 mt-1.5 gap-4'>
   {
@@ -75,9 +70,14 @@ const [count, search] = await Promise.all([
         </div>
         <div class='flex flex-col p-2.5 justify-center text-left'>
           <div class=' text-link group-hover:underline'>{album.title}</div>
-          <div class='mt-0.5'>{album.releaseDate?.toISOString().split('T')[0]}</div>
+          <div class='text-sm text-slate-100 mt-0.5'>{album.releaseDate?.toISOString().split('T')[0]}</div>
         </div>
       </a>
     ))
   }
 </div>
+<div class='text-xl'>
+  <div class='flex gap-x-2'>
+    <SearchNav query={query} count={count} take={take} page={page} />
+  </div>
+</div>

src/components/search/SearchNav.astro

@@ -0,0 +1,25 @@
+---
+interface Props {
+  count: number
+  take: number
+  page: number
+  query: string
+}
+
+const { count, take, page, query } = Astro.props
+const pageCount = Math.ceil(count / take)
+---
+
+{
+  pageCount > 1
+    ? Array.from({ length: pageCount }, (_, i) =>
+        page === i + 1 ? (
+          <span class='bg-gray rounded px-2 cursor-pointer'>{i + 1}</span>
+        ) : (
+          <a class='bg-gray/50 rounded px-2' href={`/search?q=${query}&page=${i + 1}`}>
+            {i + 1}
+          </a>
+        )
+      )
+    : null
+}

src/pages/search.astro

@@ -3,7 +3,7 @@ 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"
+const page = Astro.url.searchParams.get('page') || '1'
 
 if (!query) return Astro.redirect(404)
 ---
@@ -12,7 +12,7 @@ if (!query) return Astro.redirect(404)
   <div class='w-full bg-dark'>
     <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'>
+      <div class='mt-5 flex flex-col gap-y-2'>
         <AlbumSearch query={query} page={parseInt(page)} />
       </div>
     </div>