diff --git a/src/components.tsx b/src/components.tsx index 35fbaf9..8be4eff 100644 --- a/src/components.tsx +++ b/src/components.tsx @@ -622,9 +622,11 @@ export const CardSearchBox = forwardRef< autoFocus?: boolean; /** Larger, more prominent input (used for the primary Add Cards field). */ big?: boolean; + /** Show each result's price at the right — for picking cards to buy. */ + showPrice?: boolean; } >(function CardSearchBox( - { placeholder, value, onChange, results, onPick, autoFocus, big }, + { placeholder, value, onChange, results, onPick, autoFocus, big, showPrice }, forwardedRef, ) { const [sel, setSel] = useState(0); @@ -682,6 +684,9 @@ export const CardSearchBox = forwardRef< {c.name} {c.type_line} + {showPrice && ( + {c.price_usd > 0 ? `$${c.price_usd.toFixed(2)}` : "—"} + )} ))} diff --git a/src/styles.css b/src/styles.css index 6238cba..aed2164 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1375,6 +1375,12 @@ button.legality-tile-select { .result-list li:last-child { border-bottom: none; } +.result-list .result-price { + margin-left: auto; + flex-shrink: 0; + font-variant-numeric: tabular-nums; + color: var(--text); +} .result-list li:hover { background: var(--bg-hover); } diff --git a/src/views/DeckView.tsx b/src/views/DeckView.tsx index fc5efe8..b9e6de0 100644 --- a/src/views/DeckView.tsx +++ b/src/views/DeckView.tsx @@ -1583,6 +1583,7 @@ function DeckBuilder({ onChange={setAnyQuery} results={anyResults} onPick={addToDeck} + showPrice /> {cardsGroup(unowned)}