klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Build world campaigns rewards and recaps

Browse Source
This commit is contained in:
Gregor Klevže
2026-05-01 11:44:41 +02:00
parent 28e7e46e13
commit 257b0dbef6
100 changed files with 11300 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
resources/js/Pages/Group/GroupChallengeShow.jsx
View File

@@ -1,11 +1,32 @@
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">
@@ -24,6 +45,7 @@ export default function GroupChallengeShow() {
{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>
@@ -45,17 +67,25 @@ export default function GroupChallengeShow() {
) : null}
</section>
<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 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>