404 page created with random pokemon encounter. Add sample data to latest sales table and set up NM prices inside modal

src/components/Card.astro

@@ -9,7 +9,7 @@ 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,Artist',
+    query_by: 'productLineName,productName,setName,number,rarityName',
     per_page: 250,
 });
 const productIds = searchResults.hits?.map((hit: any) => hit.document.productId) ?? [];
@@ -38,9 +38,10 @@ const formatPrice = (price:any) => {
 const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
 ---
 {pokemon.map((card) => (
-    <div hx-get={`/partials/card-modal?productId=${card.productId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal">
-    <div class="col tcg-card">
-        <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="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()
@@ -49,7 +50,7 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
             arr.findIndex(p => p.condition === price.condition) === index
             )
             .map((price) => (
-            <div class="col price-label ps-xxl-2 ps-1">
+            <div class="col price-label ps-1">
                 {price.condition.split(' ').map((w) => w[0]).join('')}
                 <br />${formatPrice(price.marketPrice)}
             </div>
@@ -57,10 +58,9 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
         </div>
         <div class="h5 my-0">{card.productName}</div>
         <div class="d-flex flex-row lh-1 mt-1">
-            <div class="copy-small flex-grow-1">{card.set?.setCode}</div>
-            <div class="copy-small">{card.number}</div>
+            <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>
-    </div>
 ))}

src/components/EnergyIcon.astro

@@ -1,7 +1,7 @@
 ---
 import grass from "/src/svg/energy/grass.svg?raw";
 import fairy from "/src/svg/energy/fairy.svg?raw";
-import dark from "/src/svg/energy/dark.svg?raw";
+import darkness from "/src/svg/energy/dark.svg?raw";
 import dragon from "/src/svg/energy/dragon.svg?raw";
 import fire from "/src/svg/energy/fire.svg?raw";
 import water from "/src/svg/energy/water.svg?raw";
@@ -16,7 +16,7 @@ const { energy } = Astro.props;
 const energyMap = {
   "Grass": grass,
   "Fairy": fairy,
-  "Dark": dark,
+  "Darkness": darkness,
   "Dragon": dragon,
   "Fire": fire,
   "Water": water,

src/components/SetIcon.astro

@@ -27,10 +27,21 @@ import diamond_and_pearl from "/src/svg/set/diamond_and_pearl.svg?raw";
 import double_crisis from "/src/svg/set/double_crisis.svg?raw";
 import dragon_majesty from "/src/svg/set/dragon_majesty.svg?raw";
 import neo_genesis from "/src/svg/set/neo_genesis.svg?raw";
+import jungle from "/src/svg/set/jungle.svg?raw";
+import fossil from "/src/svg/set/fossil.svg?raw";
+import ascended_heroes from "/src/svg/set/ascended_heroes.svg?raw";
+import expedition from "/src/svg/set/expedition.svg?raw";
+import dragonvault from "/src/svg/set/dragon_vault.svg?raw";
+import dragonsexalted from "/src/svg/set/dragons_exalted.svg?raw";
+import ecardsample from "/src/svg/set/e-card_sample_set.svg?raw";
+import emergingpowers from "/src/svg/set/emerging_powers.svg?raw";
+import evolutions from "/src/svg/set/evolutions.svg?raw";
+import evolvingskies from "/src/svg/set/evolving_skies.svg?raw";
 
 const { set } = Astro.props;
 
 const setMap = {
+  "ME: Ascended Heroes": ascended_heroes,
   "Ancient Origins": ancient_origins,
   "Aquapolis": aquapolis,
   "Arceus": arceus,
@@ -59,6 +70,15 @@ const setMap = {
   "Double Crisis": double_crisis,
   "Dragon Majesty": dragon_majesty,
   "Neo Genesis": neo_genesis,
+  "Jungle": jungle,
+  "Fossil": fossil,
+  "Expedition Base Set": expedition,
+  "Dragon Vault": dragonvault,
+  "Dragons Exalted": dragonsexalted,
+  "E-Card Sample": ecardsample,
+  "Emerging Powers": emergingpowers,
+  "Evolutions": evolutions,
+  "SWSH07: Evolving Skies": evolvingskies,
 };
 
 const svg = setMap[set as keyof typeof setMap] ?? "";