Files
pokemon/src/components/Card.astro

66 lines
2.5 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
//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>
))}