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)}