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

add separate checkboxes for variants

Browse Source
This commit is contained in:
Foohoo
2025-08-17 12:37:32 +01:00
parent b9e7e21919
commit e9f132e9dd
5 changed files with 114 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/CardItem.tsx
View File

@@ -3,8 +3,11 @@ import Image from 'next/image';
import React from 'react';
import type { TcgCard } from '@/types/pokemon';
import SetBadge from './SetBadge';
import type { VariantKey, VariantState } from '@/lib/checklist';
export default function CardItem({ card, checked, onToggle }:{ card: TcgCard; checked: boolean; onToggle: (id:string)=>void }) {
export default function CardItem({ card, checked, onToggle }:{ card: TcgCard; checked: VariantState; onToggle: (id:string, key: VariantKey)=>void }) {
const hasHolo = !!(card.variants?.holofoil || (card.tcgplayer as any)?.prices?.holofoil);
const hasReverse = !!(card.variants?.reverseHolofoil || (card.tcgplayer as any)?.prices?.reverseHolofoil);
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">
@@ -22,17 +25,41 @@ export default function CardItem({ card, checked, onToggle }:{ card: TcgCard; ch
{card.rarity ? <span className="text-[0.7rem] rounded bg-slate-100 px-2 py-0.5 text-slate-600">{card.rarity}</span> : null}
</div>
<SetBadge set={card.set} />
<div className="pt-1">
<div className="pt-1 flex flex-wrap gap-2">
<label className="inline-flex items-center gap-2 text-xs bg-white px-2 py-1 rounded border border-slate-200">
<input
type="checkbox"
checked={checked}
onChange={() => onToggle(card.id)}
checked={!!checked.base}
onChange={() => onToggle(card.id, 'base')}
className="h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500"
aria-label={`Mark ${card.name} #${card.number} as collected`}
aria-label={`Mark ${card.name} #${card.number} (base) as collected`}
/>
<span>Collected</span>
<span>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">
<input
type="checkbox"
checked={!!checked.holofoil}
onChange={() => onToggle(card.id, 'holofoil')}
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>
</label>
)}
{hasReverse && (
<label className="inline-flex items-center gap-2 text-xs bg-white px-2 py-1 rounded border border-slate-200">
<input
type="checkbox"
checked={!!checked.reverseHolofoil}
onChange={() => onToggle(card.id, 'reverseHolofoil')}
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>
</label>
)}
</div>
</div>
</div>