Syco/YuGiOh-Database-Frontend
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

claude fix

Browse Source
This commit is contained in:
Syco21
2026-03-29 20:37:36 +02:00
parent 25c0b1faa0
commit 9f97dd9721
1 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/HomePage.jsx
+32 -27
View File
@@ -58,37 +58,42 @@ function HomePage() {
.sort((a, b) => a.name.localeCompare(b.name)); .sort((a, b) => a.name.localeCompare(b.name));
return ( return (
<div style={{ display: 'flex', height: '100vh' }}> <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
{/* Left panel: card list */} {/* Main content row */}
<div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem' }}> <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
<h2>Card List</h2> {/* Left panel: card list */}
<SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} /> <div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem', overflow: 'hidden' }}>
<h2>Card List</h2>
<SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
{/* ✅ Virtualized list */} {/* ✅ Virtualized list */}
<Virtuoso <Virtuoso
style={{ height: 'calc(100vh - 100px)' }} // Adjust for header/search bar style={{ height: 'calc(100vh - 100px)' }}
data={filteredCards} data={filteredCards}
itemContent={(index, card) => <CardRow key={card.id} card={card} />} itemContent={(index, card) => <CardRow key={card.id} card={card} />}
/> />
</div> </div>
{/* Right panel: card image */} {/* Right panel: card image */}
<div style={{ flex: 1, padding: '1rem' }}> <div style={{ flex: 1, padding: '1rem', overflowY: 'auto' }}>
<h2>Card Image / Details</h2> <h2>Card Image / Details</h2>
{expandedCardId && expandedCard ? ( {expandedCardId && expandedCard ? (
cardImages[expandedCardId] ? ( cardImages[expandedCardId] ? (
<img <img
src={cardImages[expandedCardId]} src={cardImages[expandedCardId]}
alt={expandedCard.name} alt={expandedCard.name}
style={{ maxWidth: '100%', maxHeight: '80vh' }} style={{ maxWidth: '100%', maxHeight: '80vh' }}
/> />
) : (
<p>Loading image...</p>
)
) : ( ) : (
<p>Loading image...</p> <p>Click a card to see its image</p>
) )}
) : ( </div>
<p>Click a card to see its image</p>
)}
</div> </div>
{/* Footer: always at the bottom */}
<Footer /> <Footer />
</div> </div>
); );