[feat] pokemon not found

src/components/CardGrid.astro

@@ -17,6 +17,7 @@
     <div class="col-sm-12 col-md-9 mt-0">
         <div id="cardGrid" class="row g-xxl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xxl-4 row-cols-xxxl-5">
         </div>
+        <div id="notfound"></div>
     </div>
 </div>
 <div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">

src/pages/partials/cards.astro

@@ -5,7 +5,7 @@ import RarityIcon from '../../components/RarityIcon.astro';
 export const prerender = false;
 
 // all the facet fields we want to use for filtering
-const facetFields = {
+const facetFields:any = {
     "productLineName": "Product Line",
     "setName": "Set",
     "variant": "Variant",
@@ -90,7 +90,7 @@ const totalHits = cardResults?.found;
 
 // format price to 2 decimal places (or 0 if price >=100) and adds a $ sign, if the price is null it returns "–"
 const formatPrice = (condition:string, skus: any) => {
-    const sku = skus.find(price => price.condition === condition);
+    const sku:any = skus.find((price:any) => price.condition === condition);
     if (typeof sku === 'undefined' || typeof sku.marketPrice === 'undefined') return '—';
 
     const price = Number(sku.marketPrice) / 100.0;
@@ -113,18 +113,16 @@ const facetNames = (name:string) => {
     return facetFields[name] || name;
 }
 
-if (start === 0) {
+const facets = searchResults.results.slice(1).map((result: any) => {
-    var facets = searchResults.results.slice(1).map((result: any) => {
+    return result.facet_counts[0];
-        return result.facet_counts[0];
+});
-    });
-}
 
 ---
 {(start === 0) &&
 
     <div id="facetContainer" hx-swap-oob="true">
         <div class="bg-dark sticky-top p-2 d-flex justify-content-end align-items-center">
-            <button type="" form="" class="btn btn-secondary btn-sm me-2">Clear</button>
+            <button type="reset" form="" class="btn btn-secondary btn-sm me-2">Clear</button>
             <button type="submit" form="searchform" class="btn btn-secondary btn-sm">Apply Filters</button>
         </div>
         {facets.map((facet) => (
@@ -134,7 +132,7 @@ if (start === 0) {
                     <input class="facet-filter form-control col-auto me-3" type="text" id={`filter_${facet.field_name}`} placeholder="Search..." />
                 }
                 <div class="facet-list col-11 mt-2">
-                    {facet.counts.map((count) => (
+                    {facet.counts.map((count:any) => (
                         <div class="facet-item form-check" data-facet-value={count.value.toLowerCase()}>
                             <label class="form-check-label">
                                 <input type="checkbox" name={facet.field_name} value={count.value} checked={filterChecked(facet.field_name, count.value)} class="form-check-input" form="searchform" />
@@ -165,7 +163,13 @@ if (start === 0) {
     </script>
 }
 
-{pokemon.map((card) => (
+{pokemon.length === 0 && (
+    <div id="notfound" hx-swap-oob="true">
+        Pokemon not found
+    </div>
+)}
+
+{pokemon.map((card:any) => (
     <div class="col">
         <div class="inventory-button position-relative float-end shadow-filter text-center d-none">
             <div class="inventory-label pt-2">+/-</div>