Add localization for search page

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,4 +1,5 @@
 ---
+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'
@@ -39,16 +40,14 @@ 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'>
-  Albums ({count}) {
-    count > take ? (
-      <span>
-        {' '}
-        / Showing {page === 1 ? `first ${take}` : `${(page - 1) * take}-${Math.min(page * take, count)}`} results
-      </span>
-    ) : null
+  {m.albums()} ({count}) {
+    count > take ? <span> / {page === 1 ? m.firstResults({ take }) : m.moreResults({ start, end })}</span> : null
   }
 </div>
 <div class='flex gap-x-2'>
@@ -76,8 +75,7 @@ const [count, search] = await Promise.all([
     ))
   }
 </div>
-<div class='text-xl'>
-  <div class='flex gap-x-2'>
-    <SearchNav query={query} count={count} take={take} page={page} />
-  </div>
+
+<div class='text-xl flex gap-x-2'>
+  <SearchNav query={query} count={count} take={take} page={page} />
 </div>

src/pages/search.astro

@@ -1,4 +1,6 @@
 ---
+import * as m from 'paraglide/messages'
+
 import AlbumSearch from 'components/search/AlbumSearch.astro'
 import BaseLayout from 'layouts/base.astro'
 
@@ -11,7 +13,7 @@ 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 flex flex-col gap-y-2'>
         <AlbumSearch query={query} page={parseInt(page)} />
       </div>