93 lines
5.2 KiB
JavaScript
93 lines
5.2 KiB
JavaScript
import React from 'react'
|
|
import { usePage } from '@inertiajs/react'
|
|
import SeoHead from '../../components/seo/SeoHead'
|
|
import ChallengeWorldLinkBadge from '../../components/worlds/ChallengeWorldLinkBadge'
|
|
import WorldChallengeArtworkCard from '../../components/worlds/WorldChallengeArtworkCard'
|
|
|
|
function OutcomeSection({ section }) {
|
|
const items = Array.isArray(section?.items) ? section.items : []
|
|
|
|
if (items.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<h2 className="text-2xl font-semibold text-white">{section.label}</h2>
|
|
<div className="mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-1">
|
|
{items.map((item) => <WorldChallengeArtworkCard key={item.id} item={item} featured={item.outcome_type === 'winner'} />)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default function GroupChallengeShow() {
|
|
const { props } = usePage()
|
|
const group = props.group || {}
|
|
const challenge = props.challenge || {}
|
|
const linkedWorld = props.linkedWorld || null
|
|
const outcomeSections = challenge.outcome_sections || {}
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(234,179,8,0.15),_transparent_28%),linear-gradient(180deg,_#020617_0%,_#02040a_100%)] px-4 py-10 sm:px-6 lg:px-8">
|
|
<SeoHead seo={props.seo || {}} title={`${challenge.title || group.name} - Skinbase`} description={challenge.summary || challenge.description || 'Group challenge'} />
|
|
<div className="mx-auto max-w-6xl space-y-8">
|
|
<section className="overflow-hidden rounded-[32px] border border-white/10 bg-white/[0.03]">
|
|
{challenge.cover_url ? <img src={challenge.cover_url} alt={challenge.title} className="h-56 w-full object-cover" /> : <div className="h-40 bg-white/[0.03]" />}
|
|
<div className="p-6">
|
|
<a href={group.urls?.public} className="text-sm font-semibold text-amber-200">{group.name}</a>
|
|
<h1 className="mt-4 text-4xl font-semibold text-white">{challenge.title}</h1>
|
|
<p className="mt-4 max-w-3xl text-sm leading-7 text-slate-300">{challenge.summary || challenge.description || 'Group challenge'}</p>
|
|
<div className="mt-5 flex flex-wrap gap-3 text-xs uppercase tracking-[0.16em] text-slate-400">
|
|
<span>{challenge.status}</span>
|
|
<span>{challenge.visibility}</span>
|
|
<span>{String(challenge.participation_scope || '').replace('_', ' ')}</span>
|
|
{challenge.start_at ? <span>Starts {new Date(challenge.start_at).toLocaleDateString()}</span> : null}
|
|
{challenge.end_at ? <span>Ends {new Date(challenge.end_at).toLocaleDateString()}</span> : null}
|
|
</div>
|
|
<ChallengeWorldLinkBadge world={linkedWorld} className="mt-5" />
|
|
</div>
|
|
</section>
|
|
|
|
<div className="grid gap-8 xl:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)]">
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<h2 className="text-2xl font-semibold text-white">Challenge brief</h2>
|
|
<p className="mt-4 text-sm leading-7 text-slate-300">{challenge.description || 'No extended challenge brief yet.'}</p>
|
|
{challenge.rules_text ? (
|
|
<div className="mt-6 rounded-2xl border border-white/10 bg-black/20 p-4">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Rules</div>
|
|
<p className="mt-2 text-sm leading-7 text-slate-300">{challenge.rules_text}</p>
|
|
</div>
|
|
) : null}
|
|
{challenge.submission_instructions ? (
|
|
<div className="mt-6 rounded-2xl border border-white/10 bg-black/20 p-4">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Submission instructions</div>
|
|
<p className="mt-2 text-sm leading-7 text-slate-300">{challenge.submission_instructions}</p>
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
|
|
<div className="space-y-8">
|
|
<OutcomeSection section={outcomeSections.winner} />
|
|
<OutcomeSection section={outcomeSections.finalist} />
|
|
<OutcomeSection section={outcomeSections.runner_up} />
|
|
<OutcomeSection section={outcomeSections.honorable_mention} />
|
|
<OutcomeSection section={outcomeSections.featured} />
|
|
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<h2 className="text-2xl font-semibold text-white">Entries</h2>
|
|
<div className="mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-1">
|
|
{Array.isArray(challenge.artworks) && challenge.artworks.length > 0 ? challenge.artworks.map((artwork) => (
|
|
<a key={artwork.id} href={artwork.url} className="overflow-hidden rounded-[24px] border border-white/10 bg-black/20">
|
|
{artwork.thumb ? <img src={artwork.thumb} alt={artwork.title} className="aspect-[4/3] w-full object-cover" /> : null}
|
|
<div className="p-4 text-white">{artwork.title}</div>
|
|
</a>
|
|
)) : <p className="text-sm text-slate-400">No entries linked yet.</p>}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
)
|
|
} |