26 lines
2.0 KiB
JavaScript
26 lines
2.0 KiB
JavaScript
import React from 'react'
|
|
import WorldChallengeStatusBadge from './WorldChallengeStatusBadge'
|
|
|
|
export default function WorldChallengeArtworkCard({ item, featured = false, sectionKey = 'challenge_entries', challengeId = null }) {
|
|
if (!item) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<a href={item.url || '#'} data-world-event="world_entity_clicked" data-world-section-key={sectionKey} data-world-entity-type="artwork" data-world-entity-id={item.id} data-world-entity-title={item.title || ''} data-world-challenge-id={challengeId || ''} className={`overflow-hidden rounded-[24px] border transition ${featured ? 'border-amber-300/20 bg-amber-400/10 hover:border-amber-200/35' : 'border-white/10 bg-black/20 hover:border-white/15 hover:bg-white/[0.06]'}`}>
|
|
<div className="aspect-[4/3] overflow-hidden bg-slate-950/80">
|
|
{item.image ? <img src={item.image} alt={item.title} className="h-full w-full object-cover" /> : <div className="flex h-full items-center justify-center text-slate-500"><i className="fa-solid fa-image" /></div>}
|
|
</div>
|
|
<div className="p-4">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{item.status_label ? <WorldChallengeStatusBadge label={item.status_label} tone={featured ? 'amber' : 'slate'} className="px-2.5 py-1 text-[10px]" /> : null}
|
|
{item.context_label ? <span className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">{item.context_label}</span> : null}
|
|
</div>
|
|
<div className="mt-3 text-base font-semibold text-white">{item.title}</div>
|
|
{item.subtitle ? <div className="mt-1 text-xs uppercase tracking-[0.16em] text-slate-500">{item.subtitle}</div> : null}
|
|
{item.description ? <p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p> : null}
|
|
{Array.isArray(item.meta) && item.meta.length > 0 ? <div className="mt-3 flex flex-wrap gap-2 text-xs text-slate-500">{item.meta.map((entry) => <span key={entry}>{entry}</span>)}</div> : null}
|
|
</div>
|
|
</a>
|
|
)
|
|
} |