tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

grid and style adjustments - new rarity component for rarity symbol svgs

Browse Source
This commit is contained in:
zach
2026-02-16 15:54:07 -05:00
parent 32df33f29e
commit e4e4e6607a
22 changed files with 322 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/pokemon.astro
View File

@@ -1,45 +1,65 @@
---
import Layout from '../layouts/Main.astro';
import RarityIcon from "../components/RarityIcon.astro";
//import { eq } from 'drizzle-orm';
import { db } from '../db';
//import * as schema from '../db/schema.ts';
// Get some sample Pokemon data from the database
//const pokemon = await db.select().from(schema.cards).where(eq(schema.cards.productLineName, "pokemon")).limit(16);
//const pokemon = await db.select().from(schema.cards).where(eq(schema.cards.productLineName, "pokemon")).limit(256);
const pokemon = await db.query.cards.findMany({
where: { productLineName: "pokemon" },
limit: 16,
limit: 32,
with: {
prices: true,
}
});
const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
---
<Layout>
<div class="container">
<h1 class="my-5">Rigid's app thing</h1>
<div class="row">
<div class="col-12">
<h1>Pokemon</h1>
<div class="col-sm-12 col-md-2">
<div class="h5">Inventory management placeholder</div>
</div>
<div class="col-sm-12 col-md-10">
<div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
{pokemon.map((card) => (
<div class="col">
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} class="w-100 img-fluid rounded-4 mb-2" />
<div class="row row-cols-2">
<div class="col-auto h6">{card.productName}</div>
<div class="col-auto ms-auto copy-small">{card.number}</div>
</div>
<div class="row justify-content-end">
<div class="col-auto ms-auto">
<RarityIcon rarity={card.rarityName} />
</div>
</div>
<div class="row row-cols-5 gx-0 mt-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 copy-small p price-label">
{price.condition.split(' ').map((w) => w[0]).join('')}
<br />${price.marketPrice}
</div>
))}
</div>
</div>
))}
</div>
</div>
</div>
<div class="row gy-4 row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
{pokemon.map((card) => (
<div class="col">
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} class="img-fluid" />
<div class="row justify-content-between">
<div class="col-auto"><strong>{card.productName}</strong></div>
<div class="col-auto">{card.number}</div>
</div>
<div class="row">
{card.prices.map((price) => (
<div class="col-auto copy-small">{price.condition.split(' ').map((word) => word.charAt(0)).join('')}<br />{price.marketPrice}</div>
))}
</div>
</div>
))}
</div>
</div>
</Layout>