created modal component, energy icon component; also included additional BS add-ons and vendor logos (for buttons)
This commit is contained in:
zach
@@ -4,6 +4,7 @@ import { isConditionalExpression } from 'typescript';
|
||||
import { client } from '../db/typesense.ts';
|
||||
import { db } from '../db';
|
||||
import RarityIcon from './RarityIcon.astro';
|
||||
import EnergyIcon from './EnergyIcon.astro';
|
||||
//import * as schema from '../db/schema.ts';
|
||||
|
||||
const { query } = Astro.props;
|
||||
@@ -38,7 +39,7 @@ const formatPrice = (price:any) => {
|
||||
const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
|
||||
---
|
||||
{pokemon.map((card) => (
|
||||
<div class="col">
|
||||
<div class="col tcg-card" 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 class="row row-cols-5 gx-1 price-row mb-2">
|
||||
{card.prices
|
||||
@@ -55,8 +56,8 @@ 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">
|
||||
<div class="copy-small d-none d-lg-flex flex-grow-1">{card.set?.setCode}</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>
|
||||
<RarityIcon rarity={card.rarityName} />
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,184 @@
|
||||
---
|
||||
import Card from '../components/Card.astro';
|
||||
import ebay from "/vendors/ebay.svg?raw";
|
||||
---
|
||||
|
||||
---
|
||||
<!-- Modal -->
|
||||
<div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-0">
|
||||
<h4 class="card-title">Card title | <span class="text-secondary">Card Number</span> Energy</h4>
|
||||
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body pt-0">
|
||||
<div class="container-fluid">
|
||||
<div class="card mb-2 border-0">
|
||||
<div class="row g-4">
|
||||
<div class="col-sm-12 col-md-3">
|
||||
<h6 class="text-secondary">Set name | Set Symbol</h6>
|
||||
<img src="/cards/noImage.webp" class="card-image img-fluid rounded" alt="...">
|
||||
<div class="d-flex flex-row justify-content-between mt-2">
|
||||
<div>Illustrator</div>
|
||||
<div>Rarity</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<nav>
|
||||
<div class="nav nav-tabs nav-sm-fill border-0" id="nav-tab" role="tablist">
|
||||
<button class="nav-link nm active" id="nav-nm" data-bs-toggle="tab" data-bs-target="#nav-nm" type="button" role="tab" aria-controls="nav-nm" aria-selected="true"><span class="d-none d-md-inline">Near Mint</span><span class="d-md-none">NM</span></button>
|
||||
<button class="nav-link lp" id="nav-lp" data-bs-toggle="tab" data-bs-target="#nav-lp" type="button" role="tab" aria-controls="nav-lp" aria-selected="false"><span class="d-none d-md-inline">Lightly Played</span><span class="d-md-none">LP</span></button>
|
||||
<button class="nav-link mp" id="nav-mp" data-bs-toggle="tab" data-bs-target="#nav-mp" type="button" role="tab" aria-controls="nav-mp" aria-selected="false"><span class="d-none d-md-inline">Moderately Played</span><span class="d-md-none">MP</span></button>
|
||||
<button class="nav-link hp" id="nav-hp" data-bs-toggle="tab" data-bs-target="#nav-hp" type="button" role="tab" aria-controls="nav-hp" aria-selected="false"><span class="d-none d-md-inline">Heavily Played</span><span class="d-md-none">HP</span></button>
|
||||
<button class="nav-link dmg" id="nav-dmg" data-bs-toggle="tab" data-bs-target="#nav-dmg" type="button" role="tab" aria-controls="nav-dmg" aria-selected="false"><span class="d-none d-md-inline">Damaged</span><span class="d-md-none">DMG</span></button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active" id="nav-nm" role="tabpanel" aria-labelledby="nav-nm" tabindex="0">
|
||||
<div class="row g-2 mt-2">
|
||||
<div class="d-inline-flex flex-row flex-md-column flex-wrap flex-md-nowrap mt-2 col-sm-4 col-md-3">
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Market Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Lowest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Highest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Volatility</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
||||
<h6>Latest Sales</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column mt-2 col-xs-8 col-md-9">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-lp" role="tabpanel" aria-labelledby="nav-lp" tabindex="0">
|
||||
<div class="row g-2 mt-2">
|
||||
<div class="d-flex flex-column mt-2 col-3">
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Market Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Lowest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Highest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Volatility</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
||||
<h6>Latest Sales</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-mp" role="tabpanel" aria-labelledby="nav-mp" tabindex="0">
|
||||
<div class="row g-2 mt-2">
|
||||
<div class="d-flex flex-column mt-2 col-3">
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Market Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Lowest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Highest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Volatility</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
||||
<h6>Latest Sales</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-hp" role="tabpanel" aria-labelledby="nav-hp" tabindex="0">
|
||||
<div class="row g-2 mt-2">
|
||||
<div class="d-flex flex-column mt-2 col-3">
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Market Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Lowest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Highest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Volatility</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
||||
<h6>Latest Sales</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-dmg" role="tabpanel" aria-labelledby="nav-dmg" tabindex="0">
|
||||
<div class="row g-2 mt-2">
|
||||
<div class="d-flex flex-column mt-2 col-3">
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Market Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Lowest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Highest Price</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2">
|
||||
<h6>Volatility</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="dark-callout rounded p-2 mb-2 flex-fill">
|
||||
<h6>Latest Sales</h6>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-2">
|
||||
<button type="button" class="btn btn-secondary mb-2 w-100"><img src="/vendors/tcgplayer.webp"> TCGPlayer</button>
|
||||
<button type="button" class="btn btn-secondary mb-2 w-100"><span set:html={ebay} /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end my-0"><small class="text-body-secondary">Prices last updated</small></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
33
src/components/EnergyIcon.astro
Normal file
33
src/components/EnergyIcon.astro
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
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 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";
|
||||
import electric from "/src/svg/energy/electric.svg?raw";
|
||||
import steel from "/src/svg/energy/steel.svg?raw";
|
||||
import colorless from "/src/svg/energy/colorless.svg?raw";
|
||||
import fighting from "/src/svg/energy/fighting.svg?raw";
|
||||
import psychic from "/src/svg/energy/psychic.svg?raw";
|
||||
|
||||
const { energy } = Astro.props;
|
||||
|
||||
const energyMap = {
|
||||
"Grass": grass,
|
||||
"Fairy": fairy,
|
||||
"Dark": dark,
|
||||
"Dragon": dragon,
|
||||
"Fire": fire,
|
||||
"Water": water,
|
||||
"Steel": steel,
|
||||
"Colorless": colorless,
|
||||
"Fighting": fighting,
|
||||
"Psychic": psychic,
|
||||
"Electric": electric,
|
||||
};
|
||||
|
||||
const svg = energyMap[energy as keyof typeof energyMap] ?? "";
|
||||
---
|
||||
|
||||
<div class="energy-icon ps-2" set:html={svg}></div>
|
||||
@@ -11,7 +11,7 @@ const { query } = Astro.props;
|
||||
<input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." value={query} />
|
||||
</div>
|
||||
<div class="my-2">
|
||||
<input type="submit" class="btn btn-primary w-100 search-button" value="Search" />
|
||||
<input type="submit" class="w-100 search-button" value="Search" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user