36 lines
2.5 KiB
JavaScript
36 lines
2.5 KiB
JavaScript
import React from 'react'
|
|
import WorldStatusBadge from './WorldStatusBadge'
|
|
import { trackWorldSourceClick, withWorldSource } from '../../lib/worldAnalytics'
|
|
|
|
export default function ChallengeWorldLinkBadge({ world, className = '' }) {
|
|
if (!world?.public_url || !world?.title) {
|
|
return null
|
|
}
|
|
|
|
const badges = Array.isArray(world.status_badges) ? world.status_badges.filter((badge) => badge?.label).slice(0, 3) : []
|
|
const metaItems = [
|
|
world.campaign_label,
|
|
world.timeframe_label,
|
|
Number(world.live_submission_count || 0) > 0 ? `${world.live_submission_count} live submissions` : null,
|
|
].filter(Boolean)
|
|
const worldHref = withWorldSource(world.public_url, 'challenge_page', 'linked_world')
|
|
|
|
return (
|
|
<section className={`rounded-[26px] border border-sky-300/20 bg-[linear-gradient(135deg,_rgba(56,189,248,0.14),_rgba(15,23,42,0.92))] p-5 text-white ${className}`.trim()}>
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-sky-100/80">Linked world</div>
|
|
{badges.length > 0 ? <div className="flex flex-wrap gap-2">{badges.map((badge) => <WorldStatusBadge key={`${badge.label}-${badge.tone || 'slate'}`} badge={badge} />)}</div> : null}
|
|
</div>
|
|
<h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-white">Continue in {world.title}</h2>
|
|
{world.summary ? <p className="mt-3 max-w-2xl text-sm leading-7 text-slate-200">{world.summary}</p> : null}
|
|
{metaItems.length > 0 ? <div className="mt-4 flex flex-wrap gap-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-300">{metaItems.map((item) => <span key={item}>{item}</span>)}</div> : null}
|
|
<div className="mt-5 flex flex-wrap gap-3">
|
|
<a href={worldHref} onClick={() => trackWorldSourceClick({ worldId: world.id, worldTitle: world.title, sourceSurface: 'challenge_page', sourceDetail: 'linked_world' })} 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">
|
|
Open world
|
|
<i className="fa-solid fa-arrow-right" />
|
|
</a>
|
|
{world.challenge_cta_url ? <a href={world.challenge_cta_url} 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]">{world.challenge_cta_label || 'Challenge update'}</a> : null}
|
|
</div>
|
|
</section>
|
|
)
|
|
} |