soc_site-astro/src/components/search/AlbumSearch.astro

---
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
  page: number
}

const take = 20
const { query } = Astro.props
let { page } = Astro.props

if (page < 1) page = 1

const queryString = query
  .toLowerCase()
  .split('_')
  .map((w) => `+${w}`)
  .join(' ')
const findQuery: Prisma.albumsFindManyArgs = {
  select: { title: true, releaseDate: true, id: true },
  where: {
    OR: [{ title: { search: queryString } }, { subTitle: { search: queryString } }]
  },
  orderBy: {
    _relevance: { fields: ['title', 'subTitle'], sort: 'desc', search: query.toLowerCase() }
  }
}
const countQuery: Prisma.albumsCountArgs<DefaultArgs> = {
  where: findQuery.where
}

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'>
  {m.albums()} ({count}) {
    count > take ? <span> / {page === 1 ? m.firstResults({ take }) : m.moreResults({ start, end })}</span> : null
  }
</div>
<div class='flex gap-x-2'>
  <SearchNav query={query} count={count} take={take} page={page} />
</div>
<div class='grid grid-cols-1 md:grid-cols-3 mt-1.5 gap-4'>
  {
    search.map((album) => (
      <a class='flex bg-gray h-40 group hover:no-underline' href={`/album/${album.id}`}>
        <div class='h-full w-40 shrink-0'>
          <Image
            class='object-cover'
            src={`https://cdn.sittingonclouds.net/album/${album.id}.png`}
            alt={`${album.title} cover`}
            quality='low'
            height={160}
            width={160}
          />
        </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='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>