|
|
|
@@ -453,7 +453,8 @@ export default function PublicGrid({ cards, maxCols = 5 }: { cards: Card[], maxC |
|
|
|
<> |
|
|
|
<div className={`grid gap-4 ${activeGridClass}`}> |
|
|
|
{cards.map((card) => { |
|
|
|
const galleryCount = (card.extraMedia?.length || 0) + (card.imageUrl ? 1 : 0); |
|
|
|
const galleryCount = card.extraMedia?.length || 0; |
|
|
|
const isExternalLink = card.cardType === 'EXTERNAL_LINK'; |
|
|
|
// Fall back to the first gallery item when no explicit cover is set. |
|
|
|
const previewUrl = card.imageUrl || card.extraMedia?.[0]?.url || ''; |
|
|
|
const previewIsVideo = !!previewUrl && isVideoUrl(previewUrl); |
|
|
|
@@ -489,12 +490,20 @@ export default function PublicGrid({ cards, maxCols = 5 }: { cards: Card[], maxC |
|
|
|
) : ( |
|
|
|
<div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-100 to-gray-200 text-gray-400">No Image</div> |
|
|
|
)} |
|
|
|
{galleryCount > 1 && ( |
|
|
|
{isExternalLink ? ( |
|
|
|
<div |
|
|
|
className="absolute top-2 left-2 bg-black/60 text-white text-xs font-bold px-2 py-0.5 rounded-full flex items-center justify-center z-10 leading-none" |
|
|
|
title="External Link" |
|
|
|
aria-label="External Link" |
|
|
|
> |
|
|
|
L |
|
|
|
</div> |
|
|
|
) : galleryCount > 0 ? ( |
|
|
|
<div className="absolute top-2 left-2 bg-black/60 text-white text-xs font-semibold px-1.5 py-0.5 rounded-full flex items-center gap-1 z-10"> |
|
|
|
<span>⊞</span> |
|
|
|
<span>{galleryCount}</span> |
|
|
|
</div> |
|
|
|
)} |
|
|
|
) : null} |
|
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent flex flex-col justify-end p-5 text-white"> |
|
|
|
<h3 className="text-xl font-bold drop-shadow-md">{card.title}</h3> |
|
|
|
<p className="text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300 line-clamp-2 mt-1 text-gray-200 drop-shadow"> |
|
|
|
@@ -528,7 +537,6 @@ export default function PublicGrid({ cards, maxCols = 5 }: { cards: Card[], maxC |
|
|
|
</div> |
|
|
|
{(activeCard.title || activeCard.shortDescription || activeCard.fullContent || activeCard.actionUrl) && ( |
|
|
|
<div className="p-8"> |
|
|
|
<div className="text-xs text-blue-600 font-bold tracking-wider uppercase mb-2">{activeCard.cardType.replace('_', ' ')}</div> |
|
|
|
{activeCard.title && ( |
|
|
|
<h2 className={`text-3xl font-bold text-gray-900 ${(activeCard.shortDescription || activeCard.fullContent || activeCard.actionUrl) ? 'mb-4' : ''}`}> |
|
|
|
{activeCard.title} |
|
|
|
|
