change amount + pictures

2026-03-14 23:54:37 +01:00
parent 2c72b8f47d
commit fda3e3ecbf
8 changed files with 220 additions and 117 deletions
@@ -0,0 +1,36 @@
+import React, { useContext } from 'react';
+import { CardContext } from '../../store/CardContext';
+import PrintingRow from '../PrintingRow/PrintingRow';
+
+function CardRow({ card }) {
+  const { expandedCardId, setExpandedCardId } = useContext(CardContext);
+  const isExpanded = expandedCardId === card.id;
+
+  const toggleExpand = () => setExpandedCardId(isExpanded ? null : card.id);
+
+  return (
+    <div style={{ borderBottom: '1px solid #eee', padding: '0.5rem' }}>
+      <div
+        style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between' }}
+        onClick={toggleExpand}
+      >
+        <span>{card.name}</span>
+        <span>{card.type}</span>
+      </div>
+
+      {isExpanded && card.printings?.length > 0 && (
+        <div style={{ marginTop: '0.5rem', paddingLeft: '1rem' }}>
+          {card.printings.map(printing => (
+            <PrintingRow
+              key={`${card.id}-${printing.set_id}-${printing.rarity_id}`}
+              card_id={card.id}
+              printing={printing}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CardRow;