pokemon/src/components/Card.astro

---
//import { eq } from 'drizzle-orm';
import { isConditionalExpression } from 'typescript';
import { client } from '../db/typesense.ts';
import { db } from '../db';
//import * as schema from '../db/schema.ts';
import RarityIcon from './RarityIcon.astro';

const { query } = Astro.props;
const searchResults = await client.collections('cards').documents().search({
    q: query,
    query_by: 'productLineName,productName,setName,number,rarityName',
    per_page: 250,
});
const productIds = searchResults.hits?.map((hit: any) => hit.document.productId) ?? [];

// get pokemon data with prices and set info using searchResults and then query the database for each card to get the prices and set info
const pokemon = await db.query.cards.findMany({
    where: { productId: { in: productIds, }, },
    with: {
        prices: true,
        set: true,
    }
});


const formatPrice = (price:any) => {
    if (price === null) {
        return "–";
    }
    price = Number(price);
    if (price >= 99.99) {
        return `${Math.round(price)}`;
    }
    return `${price.toFixed(2)}`;
};

const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
---
{pokemon.map((card) => (
    <div class="col">
        <div hx-get={`/partials/card-modal?productId=${card.productId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal">
            <img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
        </div>
        <div class="row row-cols-5 gx-1 price-row mb-2">
        {card.prices
            .slice()
            .sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition))
            .filter((price, index, arr) =>
            arr.findIndex(p => p.condition === price.condition) === index
            )
            .map((price) => (
            <div class="col price-label ps-1">
                {price.condition.split(' ').map((w) => w[0]).join('')}
                <br />${formatPrice(price.marketPrice)}
            </div>
            ))}
        </div>
        <div class="h5 my-0">{card.productName}</div>
        <div class="d-flex flex-row lh-1 mt-1">
            <div class="text-secondary flex-grow-1">{card.set?.setCode}</div>
            <div class="text-secondary">{card.number}</div>
            <span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
        </div>
    </div>
))}