Merge pull request #9 from jorgev259/search-update

search update

messages/en.json

@@ -87,5 +87,8 @@
   "latestReleases": "Latest releases",
   "firstRelease": "First Release",
   "newestRelease": "Newest Release",
-  "variousGames": "Various Games"
+  "variousGames": "Various Games",
+  "searchResultsFor": "Search results for",
+  "firstResults": "Showing first {take} results",
+  "moreResults": "Showing {start}-{end} results"
 }

src/components/search/AlbumSearch.astro

@@ -1,9 +1,11 @@
 ---
+import * as m from 'paraglide/messages'
 import type { Prisma } from '@prisma/client'
 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
@@ -38,26 +40,18 @@ const [count, search] = await Promise.all([
   prismaClient.albums.count(countQuery),
   prismaClient.albums.findMany({ ...findQuery, take, skip: (page - 1) * take })
 ])
+
+const start = (page - 1) * take
+const end = Math.min(page * take, count)
 ---
 
-<div class='text-xl flex gap-x-4'>
+<div class='text-xl'>
-  <div>
+  {m.albums()} ({count}) {
-    Albums ({count}) {
+    count > take ? <span> / {page === 1 ? m.firstResults({ take }) : m.moreResults({ start, end })}</span> : null
-      count > take ? (
+  }
-        <span>
+</div>
-          {' '}
+<div class='flex gap-x-2'>
-          / Showing {page === 1 ? `first ${take}` : `${(page - 1) * take}-${Math.min(page * take, count)}`} results
+  <SearchNav query={query} count={count} take={take} page={page} />
-        </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 grid-cols-1 md:grid-cols-3 mt-1.5 gap-4'>
   {
@@ -75,9 +69,13 @@ 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 flex gap-x-2'>
+  <SearchNav query={query} count={count} take={take} page={page} />
+</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

@@ -1,9 +1,11 @@
 ---
+import * as m from 'paraglide/messages'
+
 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)
 ---
@@ -11,8 +13,8 @@ if (!query) return Astro.redirect(404)
 <BaseLayout>
   <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='py-4 px-4 bg-gray text-3xl text- w-full font-normal mt-2'>{m.searchResultsFor()}: {query}</div>
-      <div class='mt-5'>
+      <div class='mt-5 flex flex-col gap-y-2'>
         <AlbumSearch query={query} page={parseInt(page)} />
       </div>
     </div>