61 lines
5.5 KiB
JavaScript
61 lines
5.5 KiB
JavaScript
import React from 'react'
|
|
import WorldChallengeMeta from './WorldChallengeMeta'
|
|
import WorldChallengeStatusBadge from './WorldChallengeStatusBadge'
|
|
|
|
export default function WorldChallengePanel({ section }) {
|
|
if (!section) {
|
|
return null
|
|
}
|
|
|
|
const storyMeta = Array.isArray(section.story?.meta) ? section.story.meta.filter(Boolean) : []
|
|
const metaItems = [
|
|
section.timeframe_label,
|
|
Number(section.entry_count || 0) > 0 ? `${section.entry_count} entries` : null,
|
|
section.has_winner ? 'Winner synced' : null,
|
|
]
|
|
|
|
return (
|
|
<section className="mt-10 overflow-hidden rounded-[30px] border border-white/10 bg-white/[0.03]">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_32%),linear-gradient(135deg,_rgba(15,23,42,0.94),_rgba(2,6,23,0.98))]" />
|
|
{section.cover_url ? <img src={section.cover_url} alt={section.title} className="absolute inset-0 h-full w-full object-cover opacity-20" /> : null}
|
|
<div className="relative grid gap-6 p-6 lg:grid-cols-[minmax(0,1.25fr)_18rem] lg:p-8">
|
|
<div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<WorldChallengeStatusBadge label={section.state_label} tone={section.state_tone} />
|
|
{section.group?.name ? <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">{section.group.name}</span> : null}
|
|
</div>
|
|
<h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-white">{section.title}</h2>
|
|
{section.summary ? <p className="mt-4 max-w-3xl text-sm leading-7 text-slate-200/86">{section.summary}</p> : null}
|
|
<WorldChallengeMeta items={metaItems} className="mt-5" />
|
|
</div>
|
|
<div className="rounded-[24px] border border-white/10 bg-black/25 p-5 text-sm text-slate-200">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Linked challenge</div>
|
|
<div className="mt-3 space-y-3">
|
|
{section.show_entries ? <div>Derived entries rail enabled</div> : null}
|
|
{section.show_winners ? <div>Winner section enabled</div> : null}
|
|
{section.show_finalists ? <div>{section.supports_finalists ? 'Finalists section enabled' : 'Finalists section unavailable'}</div> : null}
|
|
</div>
|
|
{section.story?.url ? (
|
|
<div className="mt-4 rounded-[20px] border border-sky-300/15 bg-sky-400/10 p-4">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-sky-100/80">{section.story.eyebrow || section.story.context_label || 'Challenge story'}</div>
|
|
<a href={section.story.url} data-world-event="world_challenge_cta_clicked" data-world-section-key="challenge" data-world-cta-key={section.story.intent === 'recap' ? 'challenge_recap' : 'challenge_story'} data-world-challenge-id={section.id} className="mt-2 block text-base font-semibold text-white transition hover:text-sky-100">{section.story.title}</a>
|
|
{section.story.description ? <p className="mt-2 text-sm leading-6 text-slate-200/85">{section.story.description}</p> : null}
|
|
{storyMeta.length > 0 ? <div className="mt-3 flex flex-wrap gap-2 text-[11px] uppercase tracking-[0.16em] text-slate-400">{storyMeta.map((item) => <span key={item}>{item}</span>)}</div> : null}
|
|
</div>
|
|
) : null}
|
|
<div className="mt-5 flex flex-wrap gap-3">
|
|
<a href={section.cta_url || section.url} data-world-event="world_challenge_cta_clicked" data-world-section-key="challenge" data-world-cta-key={section.story?.intent === 'recap' && section.cta_url === section.story?.url ? 'challenge_recap' : 'challenge_primary'} data-world-challenge-id={section.id} className="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-semibold text-slate-950 transition hover:bg-sky-100">
|
|
{section.cta_label || 'Open challenge'}
|
|
<i className="fa-solid fa-arrow-right" />
|
|
</a>
|
|
{section.story?.url && section.story.url !== section.cta_url ? <a href={section.story.url} data-world-event="world_challenge_cta_clicked" data-world-section-key="challenge" data-world-cta-key={section.story.intent === 'recap' ? 'challenge_recap' : 'challenge_story'} data-world-challenge-id={section.id} className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15">{section.story.cta_label || 'Read story'}</a> : null}
|
|
{section.challenge_url && section.challenge_url !== section.cta_url ? <a href={section.challenge_url} data-world-event="world_challenge_cta_clicked" data-world-section-key="challenge" data-world-cta-key="challenge_direct" data-world-challenge-id={section.id} className="inline-flex items-center gap-2 rounded-full border border-white/12 bg-white/[0.05] px-4 py-2 text-sm font-semibold text-white transition hover:bg-white/[0.08]">Open challenge</a> : null}
|
|
{section.group?.url ? <a href={section.group.url} data-world-event="world_cta_clicked" data-world-section-key="challenge" data-world-cta-key="linked_group" data-world-challenge-id={section.id} className="inline-flex items-center gap-2 rounded-full border border-white/12 bg-white/[0.05] px-4 py-2 text-sm font-semibold text-white transition hover:bg-white/[0.08]">Open group</a> : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |