29 lines
1.8 KiB
JavaScript
29 lines
1.8 KiB
JavaScript
import React from 'react'
|
|
import { usePage } from '@inertiajs/react'
|
|
import StudioLayout from '../../Layouts/StudioLayout'
|
|
|
|
export default function StudioGroupChallenges() {
|
|
const { props } = usePage()
|
|
const items = Array.isArray(props.listing?.items) ? props.listing.items : []
|
|
|
|
return (
|
|
<StudioLayout title={props.title} subtitle={props.description}>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="text-sm text-slate-400">Challenges keep the group active between releases and give members a focused creative prompt.</div>
|
|
{props.createUrl ? <a href={props.createUrl} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white">Create challenge</a> : null}
|
|
</div>
|
|
<div className="mt-6 grid gap-4 lg:grid-cols-2">
|
|
{items.length > 0 ? items.map((challenge) => (
|
|
<a key={challenge.id} href={challenge.urls?.edit || challenge.url} className="rounded-[24px] border border-white/10 bg-white/[0.03] p-5 transition hover:border-white/20">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<h2 className="text-xl font-semibold text-white">{challenge.title}</h2>
|
|
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-300">{challenge.status}</span>
|
|
</div>
|
|
<p className="mt-3 text-sm leading-6 text-slate-400">{challenge.summary || 'Challenge page'}</p>
|
|
<div className="mt-4 text-xs text-slate-500">{challenge.entry_count || 0} linked entries</div>
|
|
</a>
|
|
)) : <div className="rounded-[24px] border border-dashed border-white/10 bg-white/[0.02] p-6 text-sm text-slate-400">No challenges yet.</div>}
|
|
</div>
|
|
</StudioLayout>
|
|
)
|
|
} |