Files
pokemon/src/components/Card.astro

64 lines
2.3 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 RarityIcon from './RarityIcon.astro';
//import * as schema from '../db/schema.ts';
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">
<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 class="h6 my-0">{card.productName}</div>
<div class="d-flex justify-content-between align-items-end">
<div class="copy-small">{card.number}</div>
<RarityIcon rarity={card.rarityName} />
</div>
<div class="copy-small d-none d-lg-block">{card.set?.setName}</div>
<div class="row row-cols-5 gx-1">
{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 p price-label">
{price.condition.split(' ').map((w) => w[0]).join('')}
<br />${formatPrice(price.marketPrice)}
</div>
))}
</div>
</div>
))}