adding files

src/components/Card.astro

@@ -0,0 +1,58 @@
+---
+//import { eq } from 'drizzle-orm';
+import { isConditionalExpression } from 'typescript';
+import { db } from '../db';
+import RarityIcon from './RarityIcon.astro';
+//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(256);
+const pokemon = await db.query.cards.findMany({
+    where: { productLineName: "pokemon", },
+    orderBy: (cards, { desc }) => [desc(cards.marketPrice)],
+    limit: 320,
+    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} 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">{card.set?.setName}</div>
+        <div class="row row-cols-5 gx-1 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 p price-label">
+                {price.condition.split(' ').map((w) => w[0]).join('')}
+                <br />${formatPrice(price.marketPrice)}
+            </div>
+            ))}
+        </div>
+    </div>
+))}

src/components/CardGrid.astro

@@ -0,0 +1,10 @@
+    <div class="row mb-5">
+        <div class="col-md-3 display-sm-none">
+            <div class="h5 d-none">Inventory management placeholder</div>
+        </div>
+        <div class="col-sm-12 col-md-9 mt-0">
+            <div class="row g-3 row-cols-2 row-cols-lg-3 row-cols-xl-4 d-flex">
+                <slot name="Card">
+            </div>
+        </div>
+    </div>

src/components/StickyFilter.astro

@@ -0,0 +1,11 @@
+---
+import '/src/assets/css/main.scss';
+---
+
+<div class="sticky border-bottom">
+    <div class="container">
+    <div class="d-flex align-items-center gap-3 p-2">
+        <h5>Placeholder for search input/filters</h5>
+    </div>
+    </div>
+</div>