🎨 Clean Up Debug Logs & Force Component Refresh
Removed all debug console.log statements and cleaned up the CollectionThumbnail component. The design should now consistently show: ✨ New Design: - Large main card (left side) - 2x2 grid of smaller cards (right side) - Real card images from the thumbnails API - White placeholder boxes for missing cards 🔧 Component is ready for consistent rendering of the new thumbnail layout.
This commit is contained in:
parent
3f7c8dd239
commit
e542932fbb
1 changed files with 1 additions and 13 deletions
|
|
@ -249,14 +249,10 @@ export default function Collections() {
|
||||||
return new Date(dateString).toLocaleDateString();
|
return new Date(dateString).toLocaleDateString();
|
||||||
};
|
};
|
||||||
|
|
||||||
// Collection thumbnail component
|
// Collection thumbnail component - Updated design with card images
|
||||||
const CollectionThumbnail = ({ collection }) => {
|
const CollectionThumbnail = ({ collection }) => {
|
||||||
const { thumbnails = [], image } = collection;
|
const { thumbnails = [], image } = collection;
|
||||||
|
|
||||||
console.log('🔍 CollectionThumbnail - collection:', collection.name);
|
|
||||||
console.log('🔍 CollectionThumbnail - thumbnails:', thumbnails);
|
|
||||||
console.log('🔍 CollectionThumbnail - image:', image);
|
|
||||||
|
|
||||||
// If there's a custom image, show it
|
// If there's a custom image, show it
|
||||||
if (image) {
|
if (image) {
|
||||||
return (
|
return (
|
||||||
|
|
@ -272,7 +268,6 @@ export default function Collections() {
|
||||||
|
|
||||||
// If no cards, show crying emoji
|
// If no cards, show crying emoji
|
||||||
if (!thumbnails || thumbnails.length === 0) {
|
if (!thumbnails || thumbnails.length === 0) {
|
||||||
console.log('🔍 CollectionThumbnail - showing crying emoji (no thumbnails)');
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full h-48 rounded-xl mb-4 flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
<div className="w-full h-48 rounded-xl mb-4 flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
|
|
@ -286,9 +281,6 @@ export default function Collections() {
|
||||||
const mainCard = thumbnails[0];
|
const mainCard = thumbnails[0];
|
||||||
const gridCards = thumbnails.slice(1, 5); // Get up to 4 cards for the 2x2 grid
|
const gridCards = thumbnails.slice(1, 5); // Get up to 4 cards for the 2x2 grid
|
||||||
|
|
||||||
console.log('🔍 CollectionThumbnail - mainCard:', mainCard);
|
|
||||||
console.log('🔍 CollectionThumbnail - gridCards:', gridCards);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full h-48 rounded-xl overflow-hidden mb-4 p-3 flex gap-2" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
<div className="w-full h-48 rounded-xl overflow-hidden mb-4 p-3 flex gap-2" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
||||||
{/* Main card (larger, left side) */}
|
{/* Main card (larger, left side) */}
|
||||||
|
|
@ -299,8 +291,6 @@ export default function Collections() {
|
||||||
src={mainCard.image_url || mainCard.stock_image_url}
|
src={mainCard.image_url || mainCard.stock_image_url}
|
||||||
alt={mainCard.name}
|
alt={mainCard.name}
|
||||||
className="w-full h-full object-cover"
|
className="w-full h-full object-cover"
|
||||||
onError={(e) => console.log('🔍 Image load error:', e.target.src)}
|
|
||||||
onLoad={() => console.log('🔍 Image loaded successfully:', mainCard.image_url || mainCard.stock_image_url)}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
|
@ -321,8 +311,6 @@ export default function Collections() {
|
||||||
src={card.image_url || card.stock_image_url}
|
src={card.image_url || card.stock_image_url}
|
||||||
alt={card.name}
|
alt={card.name}
|
||||||
className="w-full h-full object-cover"
|
className="w-full h-full object-cover"
|
||||||
onError={(e) => console.log('🔍 Grid image load error:', e.target.src)}
|
|
||||||
onLoad={() => console.log('🔍 Grid image loaded successfully:', card.image_url || card.stock_image_url)}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue