Bungus-People/magikarp-collection
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add cost for the variants using USD to GBP conversion

Browse Source
This commit is contained in:
Foohoo
2025-08-17 12:44:29 +01:00
parent e9f132e9dd
commit c048e37795
3 changed files with 108 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/CardItem.tsx
View File

@@ -4,10 +4,33 @@ import React from 'react';
import type { TcgCard } from '@/types/pokemon';
import SetBadge from './SetBadge';
import type { VariantKey, VariantState } from '@/lib/checklist';
import { useUsdGbpRate } from '@/lib/useExchangeRate';
export default function CardItem({ card, checked, onToggle }:{ card: TcgCard; checked: VariantState; onToggle: (id:string, key: VariantKey)=>void }) {
const rate = useUsdGbpRate();
const hasHolo = !!(card.variants?.holofoil || (card.tcgplayer as any)?.prices?.holofoil);
const hasReverse = !!(card.variants?.reverseHolofoil || (card.tcgplayer as any)?.prices?.reverseHolofoil);
const prices = (card as any).tcgplayer?.prices || {};
const getPrice = (key: VariantKey): number | undefined => {
const map: Record<VariantKey, string> = {
base: 'normal',
holofoil: 'holofoil',
reverseHolofoil: 'reverseHolofoil',
};
const entry = prices[map[key]];
if (!entry) return undefined;
const value = entry.market ?? entry.mid ?? entry.low ?? entry.high;
return typeof value === 'number' ? value : undefined;
};
const fmtGBP = (usd?: number) => {
if (typeof usd !== 'number') return undefined;
const gbp = usd * rate;
try {
return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', maximumFractionDigits: 2 }).format(gbp);
} catch {
return `£${gbp.toFixed(2)}`;
}
};
return (
<div className="group relative overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm hover:shadow-md transition">
<div className="relative aspect-[3/4] w-full bg-slate-100">
@@ -34,7 +57,7 @@ export default function CardItem({ card, checked, onToggle }:{ card: TcgCard; ch
className="h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500"
aria-label={`Mark ${card.name} #${card.number} (base) as collected`}
/>
<span>Base</span>
<span>Base{fmtGBP(getPrice('base')) ? ` — ${fmtGBP(getPrice('base'))}` : ''}</span>
</label>
{hasHolo && (
<label className="inline-flex items-center gap-2 text-xs bg-white px-2 py-1 rounded border border-slate-200">
@@ -45,7 +68,7 @@ export default function CardItem({ card, checked, onToggle }:{ card: TcgCard; ch
className="h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500"
aria-label={`Mark ${card.name} #${card.number} (holo) as collected`}
/>
<span>Holo</span>
<span>Holo{fmtGBP(getPrice('holofoil')) ? ` — ${fmtGBP(getPrice('holofoil'))}` : ''}</span>
</label>
)}
{hasReverse && (
@@ -57,7 +80,7 @@ export default function CardItem({ card, checked, onToggle }:{ card: TcgCard; ch
className="h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500"
aria-label={`Mark ${card.name} #${card.number} (reverse) as collected`}
/>
<span>Reverse</span>
<span>Reverse{fmtGBP(getPrice('reverseHolofoil')) ? ` — ${fmtGBP(getPrice('reverseHolofoil'))}` : ''}</span>
</label>
)}
</div>