change amount + pictures

src/pages/HomePage.jsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState, useContext } from 'react';
+import CardRow from '../components/CardRow/CardRow';
+import { fetchCards } from '../services/api';
+import { CardContext } from '../store/CardContext';
+
+function HomePage() {
+  const [cards, setCards] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const { expandedCardId, cardImages, setCardImage } = useContext(CardContext);
+
+  useEffect(() => {
+    fetchCards()
+      .then(data => setCards(data))
+      .catch(err => setError(err.message))
+      .finally(() => setLoading(false));
+  }, []);
+
+  // Load image for the currently expanded card
+  useEffect(() => {
+    if (!expandedCardId || cardImages[expandedCardId]) return;
+
+    fetch(`http://localhost:3000/cardImage/${expandedCardId}`)
+      .then(res => res.json())
+      .then(data => {
+        if (data.image) setCardImage(expandedCardId, data.image);
+      })
+      .catch(err => console.error('Failed to load card image', err));
+  }, [expandedCardId, cardImages, setCardImage]);
+
+  if (loading) return <p>Loading cards...</p>;
+  if (error) return <p>Error: {error}</p>;
+
+  const expandedCard = cards.find(c => c.id === expandedCardId);
+
+  return (
+    <div style={{ display: 'flex', height: '100vh' }}>
+      {/* Left panel: card list */}
+      <div style={{ flex: 1, borderRight: '1px solid #ccc', padding: '1rem', overflowY: 'auto' }}>
+        <h2>Card List</h2>
+        {cards.map(card => (
+          <CardRow key={card.id} card={card} />
+        ))}
+      </div>
+
+      {/* Right panel: card image */}
+      <div style={{ flex: 1, padding: '1rem' }}>
+        <h2>Card Image / Details</h2>
+        {expandedCardId && expandedCard ? (
+          cardImages[expandedCardId] ? (
+            <img
+              src={cardImages[expandedCardId]}
+              alt={expandedCard.name}
+              style={{ maxWidth: '100%', maxHeight: '80vh' }}
+            />
+          ) : (
+            <p>Loading image...</p>
+          )
+        ) : (
+          <p>Click a card to see its image</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default HomePage;