fixed sanitazer and academy
This commit is contained in:
639
resources/js/Pages/Admin/Academy/ChallengeEditor.jsx
Normal file
639
resources/js/Pages/Admin/Academy/ChallengeEditor.jsx
Normal file
@@ -0,0 +1,639 @@
|
||||
import React, { useMemo, useRef, useState } from 'react'
|
||||
import { Head, Link, router, useForm } from '@inertiajs/react'
|
||||
import AdminLayout from '../../../Layouts/AdminLayout'
|
||||
import DateTimePicker from '../../../components/ui/DateTimePicker'
|
||||
import NovaSelect from '../../../components/ui/NovaSelect'
|
||||
import ShareToast from '../../../components/ui/ShareToast'
|
||||
import WorldMediaUploadField from '../../../components/worlds/editor/WorldMediaUploadField'
|
||||
|
||||
const CHALLENGE_EDITOR_TABS = [
|
||||
{
|
||||
id: 'overview',
|
||||
label: 'Overview',
|
||||
description: 'Title, slug, access, and the compact summary shown in academy challenge lists.',
|
||||
icon: 'fa-compass-drafting',
|
||||
sections: ['challenge-identity'],
|
||||
},
|
||||
{
|
||||
id: 'brief',
|
||||
label: 'Brief',
|
||||
description: 'Write the creative objective, rules, prizes, required tags, and eligible categories.',
|
||||
icon: 'fa-bullseye',
|
||||
sections: ['challenge-brief', 'challenge-rules'],
|
||||
},
|
||||
{
|
||||
id: 'media',
|
||||
label: 'Media',
|
||||
description: 'Upload the hero cover and tune the visual used on challenge cards.',
|
||||
icon: 'fa-image',
|
||||
sections: ['challenge-media'],
|
||||
},
|
||||
{
|
||||
id: 'timeline',
|
||||
label: 'Timeline',
|
||||
description: 'Manage submission and voting windows without mixing them into editorial copy.',
|
||||
icon: 'fa-calendar-days',
|
||||
sections: ['challenge-timeline'],
|
||||
},
|
||||
{
|
||||
id: 'publish',
|
||||
label: 'Publish',
|
||||
description: 'Control status, visibility, featured placement, and the final public preview.',
|
||||
icon: 'fa-rocket-launch',
|
||||
sections: ['challenge-publishing', 'challenge-preview'],
|
||||
},
|
||||
]
|
||||
|
||||
const CHALLENGE_FIELD_TAB_MAP = {
|
||||
title: 'overview',
|
||||
slug: 'overview',
|
||||
excerpt: 'overview',
|
||||
access_level: 'overview',
|
||||
description: 'brief',
|
||||
brief: 'brief',
|
||||
rules: 'brief',
|
||||
prize_text: 'brief',
|
||||
required_tags: 'brief',
|
||||
allowed_categories: 'brief',
|
||||
cover_image: 'media',
|
||||
starts_at: 'timeline',
|
||||
ends_at: 'timeline',
|
||||
voting_starts_at: 'timeline',
|
||||
voting_ends_at: 'timeline',
|
||||
status: 'publish',
|
||||
featured: 'publish',
|
||||
active: 'publish',
|
||||
}
|
||||
|
||||
function getField(fields, name) {
|
||||
return fields.find((field) => field.name === name) || null
|
||||
}
|
||||
|
||||
function FieldError({ message }) {
|
||||
if (!message) return null
|
||||
return <p className="text-xs text-rose-300">{message}</p>
|
||||
}
|
||||
|
||||
function SectionCard({ id, eyebrow, title, description, actions, children, tone = 'default', className = '' }) {
|
||||
const toneClass = tone === 'feature'
|
||||
? 'bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.15),transparent_38%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.92))] shadow-[0_24px_70px_rgba(2,6,23,0.28)]'
|
||||
: 'bg-white/[0.03]'
|
||||
|
||||
return (
|
||||
<section id={id} className={`min-w-0 scroll-mt-24 rounded-[28px] border border-white/10 p-5 ${toneClass} ${className}`.trim()}>
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div className="max-w-3xl">
|
||||
{eyebrow ? <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/75">{eyebrow}</p> : null}
|
||||
<h2 className="mt-2 text-xl font-semibold tracking-[-0.03em] text-white">{title}</h2>
|
||||
{description ? <p className="mt-2 text-sm leading-6 text-slate-400">{description}</p> : null}
|
||||
</div>
|
||||
{actions ? <div className="flex flex-wrap gap-2">{actions}</div> : null}
|
||||
</div>
|
||||
<div className="mt-5">{children}</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function EditorWorkspaceTabs({ activeTab, onChange, errorCounts }) {
|
||||
const activeMeta = CHALLENGE_EDITOR_TABS.find((tab) => tab.id === activeTab) || CHALLENGE_EDITOR_TABS[0]
|
||||
|
||||
return (
|
||||
<div className="sticky top-4 z-20 rounded-[24px] border border-white/10 bg-[linear-gradient(180deg,rgba(7,11,18,0.92),rgba(5,8,14,0.88))] px-3 py-3 shadow-[0_18px_50px_rgba(2,6,23,0.18)] backdrop-blur">
|
||||
<div className="flex flex-wrap items-center gap-2" role="tablist" aria-label="Challenge editor sections">
|
||||
{CHALLENGE_EDITOR_TABS.map((tab) => {
|
||||
const isActive = tab.id === activeTab
|
||||
const errorCount = Number(errorCounts?.[tab.id] || 0)
|
||||
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={isActive}
|
||||
aria-controls={`challenge-editor-panel-${tab.id}`}
|
||||
id={`challenge-editor-tab-${tab.id}`}
|
||||
onClick={() => onChange(tab.id)}
|
||||
className={[
|
||||
'inline-flex items-center gap-2 rounded-2xl border px-4 py-2.5 text-sm font-semibold transition',
|
||||
isActive
|
||||
? 'border-sky-300/25 bg-sky-300/12 text-sky-100 ring-1 ring-sky-300/20'
|
||||
: 'border-white/10 bg-white/[0.03] text-white/80 hover:border-sky-300/30 hover:bg-sky-300/10 hover:text-white',
|
||||
].join(' ')}
|
||||
>
|
||||
<i className={`fa-solid ${tab.icon} text-xs`} />
|
||||
<span>{tab.label}</span>
|
||||
{errorCount > 0 ? <span className="rounded-full border border-rose-300/20 bg-rose-300/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.14em] text-rose-100">{errorCount}</span> : null}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-3 flex flex-wrap items-center justify-between gap-3 px-1">
|
||||
<p className="text-sm leading-6 text-slate-400">{activeMeta.description}</p>
|
||||
<div className="flex flex-wrap gap-2 text-[11px] uppercase tracking-[0.16em] text-slate-500">
|
||||
{activeMeta.sections.map((section) => (
|
||||
<span key={section} className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1.5">{section.replace('challenge-', '').replace(/-/g, ' ')}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TextField({ label, value, onChange, error, hint, ...rest }) {
|
||||
return (
|
||||
<label className="grid gap-2 text-sm text-slate-300">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{label}</span>
|
||||
<input value={value ?? ''} onChange={onChange} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" {...rest} />
|
||||
{hint ? <span className="text-xs leading-5 text-slate-500">{hint}</span> : null}
|
||||
<FieldError message={error} />
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
function TextAreaField({ label, value, onChange, error, rows = 4, hint, placeholder }) {
|
||||
return (
|
||||
<label className="grid gap-2 text-sm text-slate-300">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{label}</span>
|
||||
<textarea value={value ?? ''} onChange={onChange} rows={rows} placeholder={placeholder} className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-3 leading-7 text-white outline-none placeholder:text-slate-600" />
|
||||
{hint ? <span className="text-xs leading-5 text-slate-500">{hint}</span> : null}
|
||||
<FieldError message={error} />
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
function ToggleField({ label, checked, onChange, help, error }) {
|
||||
return (
|
||||
<label className={`flex cursor-pointer items-start gap-4 rounded-[28px] border px-5 py-4 transition ${checked ? 'border-[#f39a24]/35 bg-[#f39a24]/10' : 'border-white/10 bg-black/20 hover:border-white/20 hover:bg-white/[0.04]'}`}>
|
||||
<input type="checkbox" checked={Boolean(checked)} onChange={onChange} className="sr-only" />
|
||||
<span className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border text-sm transition ${checked ? 'border-[#f39a24] bg-[#f39a24] text-white' : 'border-white/10 bg-[#151a29] text-transparent'}`}>
|
||||
<i className="fa-solid fa-check" />
|
||||
</span>
|
||||
<span className="min-w-0">
|
||||
<span className="block text-base font-semibold tracking-[-0.02em] text-white">{label}</span>
|
||||
{help ? <span className="mt-1 block text-sm leading-6 text-slate-300">{help}</span> : null}
|
||||
<FieldError message={error} />
|
||||
</span>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
function PlainTextPreview({ title, value, fallback }) {
|
||||
return (
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{title}</p>
|
||||
<div className="mt-3 whitespace-pre-wrap text-sm leading-7 text-slate-300">
|
||||
{String(value || '').trim() || fallback}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function statusMeta(status) {
|
||||
const normalized = String(status || 'draft')
|
||||
const labels = {
|
||||
draft: 'Draft',
|
||||
scheduled: 'Scheduled',
|
||||
active: 'Active',
|
||||
voting: 'Voting',
|
||||
completed: 'Completed',
|
||||
archived: 'Archived',
|
||||
}
|
||||
|
||||
const classes = {
|
||||
draft: 'border-white/10 bg-white/[0.04] text-slate-300',
|
||||
scheduled: 'border-fuchsia-300/20 bg-fuchsia-300/10 text-fuchsia-100',
|
||||
active: 'border-emerald-300/20 bg-emerald-300/10 text-emerald-100',
|
||||
voting: 'border-sky-300/20 bg-sky-300/10 text-sky-100',
|
||||
completed: 'border-amber-300/20 bg-amber-300/10 text-amber-100',
|
||||
archived: 'border-slate-300/15 bg-slate-300/8 text-slate-300',
|
||||
}
|
||||
|
||||
return {
|
||||
label: labels[normalized] || normalized,
|
||||
className: classes[normalized] || classes.draft,
|
||||
}
|
||||
}
|
||||
|
||||
function slugifyChallengeTitle(value) {
|
||||
return String(value || '')
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '')
|
||||
.slice(0, 180)
|
||||
}
|
||||
|
||||
function normalizeList(value) {
|
||||
return String(value || '')
|
||||
.split(/[,\n]/)
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
function normalizeAssetPreview(value, cdnBaseUrl) {
|
||||
const trimmed = String(value || '').trim()
|
||||
if (!trimmed) return ''
|
||||
if (trimmed.startsWith('http://') || trimmed.startsWith('https://') || trimmed.startsWith('/')) return trimmed
|
||||
return `${String(cdnBaseUrl || '').replace(/\/$/, '')}/${trimmed.replace(/^\//, '')}`
|
||||
}
|
||||
|
||||
function stripPlainText(value) {
|
||||
return String(value || '').replace(/\s+/g, ' ').trim()
|
||||
}
|
||||
|
||||
function countWords(value) {
|
||||
const text = stripPlainText(value)
|
||||
return text ? text.split(/\s+/).length : 0
|
||||
}
|
||||
|
||||
function formatDateLabel(value, fallback = 'Not set') {
|
||||
if (!value) return fallback
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return fallback
|
||||
|
||||
return new Intl.DateTimeFormat('en', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}).format(date)
|
||||
}
|
||||
|
||||
function daysBetween(start, end) {
|
||||
const startDate = start ? new Date(start) : null
|
||||
const endDate = end ? new Date(end) : null
|
||||
|
||||
if (!startDate || !endDate || Number.isNaN(startDate.getTime()) || Number.isNaN(endDate.getTime())) {
|
||||
return null
|
||||
}
|
||||
|
||||
const diff = endDate.getTime() - startDate.getTime()
|
||||
if (diff < 0) return 'Dates need review'
|
||||
|
||||
const days = Math.max(1, Math.ceil(diff / (1000 * 60 * 60 * 24)))
|
||||
return `${days} day${days === 1 ? '' : 's'}`
|
||||
}
|
||||
|
||||
function firstErrorMessage(errors, fallback = 'Please correct the highlighted fields and try again.') {
|
||||
const queue = [errors]
|
||||
|
||||
while (queue.length > 0) {
|
||||
const current = queue.shift()
|
||||
|
||||
if (typeof current === 'string') {
|
||||
const message = current.trim()
|
||||
if (message) return message
|
||||
continue
|
||||
}
|
||||
|
||||
if (Array.isArray(current)) {
|
||||
queue.push(...current)
|
||||
continue
|
||||
}
|
||||
|
||||
if (current && typeof current === 'object') {
|
||||
queue.push(...Object.values(current))
|
||||
}
|
||||
}
|
||||
|
||||
return fallback
|
||||
}
|
||||
|
||||
function firstChallengeErrorTab(errors) {
|
||||
const firstKey = Object.keys(errors || {})[0]
|
||||
if (!firstKey) return null
|
||||
const baseKey = firstKey.split('.')[0]
|
||||
return CHALLENGE_FIELD_TAB_MAP[baseKey] || null
|
||||
}
|
||||
|
||||
function challengeTabErrorCounts(errors) {
|
||||
const counts = {}
|
||||
|
||||
Object.keys(errors || {}).forEach((key) => {
|
||||
const tabId = CHALLENGE_FIELD_TAB_MAP[key.split('.')[0]]
|
||||
if (!tabId) return
|
||||
counts[tabId] = Number(counts[tabId] || 0) + 1
|
||||
})
|
||||
|
||||
return counts
|
||||
}
|
||||
|
||||
function buildChallengePayload(data) {
|
||||
return {
|
||||
...data,
|
||||
required_tags: normalizeList(data.required_tags),
|
||||
allowed_categories: normalizeList(data.allowed_categories),
|
||||
}
|
||||
}
|
||||
|
||||
export default function ChallengeEditor({ title, subtitle, fields, record, submitUrl, indexUrl, destroyUrl, method, editorContext = {} }) {
|
||||
const form = useForm(record)
|
||||
const slugTouchedRef = useRef(String(record?.slug || '').trim() !== '')
|
||||
const [activeTab, setActiveTab] = useState('overview')
|
||||
const [coverPreviewUrl, setCoverPreviewUrl] = useState(record?.cover_image_url || normalizeAssetPreview(record?.cover_image, editorContext.coverCdnBaseUrl))
|
||||
const [stagedCoverPath, setStagedCoverPath] = useState('')
|
||||
const [toast, setToast] = useState({ id: 0, visible: false, message: '', variant: 'success' })
|
||||
|
||||
const accessField = getField(fields, 'access_level')
|
||||
const statusField = getField(fields, 'status')
|
||||
const status = statusMeta(form.data.status)
|
||||
const requiredTags = useMemo(() => normalizeList(form.data.required_tags), [form.data.required_tags])
|
||||
const allowedCategories = useMemo(() => normalizeList(form.data.allowed_categories), [form.data.allowed_categories])
|
||||
const briefWordCount = countWords(`${form.data.description || ''} ${form.data.brief || ''} ${form.data.rules || ''}`)
|
||||
const submissionWindow = daysBetween(form.data.starts_at, form.data.ends_at)
|
||||
const votingWindow = daysBetween(form.data.voting_starts_at, form.data.voting_ends_at)
|
||||
const publicPathPreview = `/academy/challenges/${form.data.slug || 'challenge-slug'}`
|
||||
const errorCounts = challengeTabErrorCounts(form.errors)
|
||||
|
||||
const sectionClassName = (sectionId) => {
|
||||
const tab = CHALLENGE_EDITOR_TABS.find((item) => item.sections.includes(sectionId))
|
||||
return tab && tab.id !== activeTab ? 'hidden' : ''
|
||||
}
|
||||
|
||||
const showToast = (message, variant = 'error') => {
|
||||
setToast({
|
||||
id: Date.now() + Math.random(),
|
||||
visible: true,
|
||||
message,
|
||||
variant,
|
||||
})
|
||||
}
|
||||
|
||||
const setTitle = (nextTitle) => {
|
||||
form.setData('title', nextTitle)
|
||||
|
||||
if (!slugTouchedRef.current) {
|
||||
form.setData('slug', slugifyChallengeTitle(nextTitle))
|
||||
}
|
||||
}
|
||||
|
||||
const handleManualCoverChange = (nextValue) => {
|
||||
setStagedCoverPath('')
|
||||
form.setData('cover_image', nextValue)
|
||||
setCoverPreviewUrl(normalizeAssetPreview(nextValue, editorContext.coverCdnBaseUrl))
|
||||
}
|
||||
|
||||
const submit = (event) => {
|
||||
event.preventDefault()
|
||||
const payload = buildChallengePayload(form.data)
|
||||
form.transform(() => payload)
|
||||
|
||||
const submitOptions = {
|
||||
preserveScroll: true,
|
||||
onError: (errors) => {
|
||||
const nextTab = firstChallengeErrorTab(errors)
|
||||
|
||||
if (nextTab) {
|
||||
setActiveTab(nextTab)
|
||||
}
|
||||
|
||||
showToast(firstErrorMessage(errors), 'error')
|
||||
},
|
||||
onFinish: () => form.transform((data) => data),
|
||||
}
|
||||
|
||||
if (method === 'patch') {
|
||||
form.patch(submitUrl, submitOptions)
|
||||
return
|
||||
}
|
||||
|
||||
form.post(submitUrl, submitOptions)
|
||||
}
|
||||
|
||||
const deleteChallenge = () => {
|
||||
if (!destroyUrl) return
|
||||
if (!window.confirm('Delete this challenge?')) return
|
||||
router.delete(destroyUrl)
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminLayout title={title} subtitle={subtitle}>
|
||||
<Head title={`Admin - ${title}`} />
|
||||
|
||||
<form onSubmit={submit} className="space-y-6 pb-16">
|
||||
<section className="overflow-hidden rounded-[28px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_34%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.94))] shadow-[0_24px_70px_rgba(2,6,23,0.34)] backdrop-blur">
|
||||
<div className="flex flex-wrap items-start justify-between gap-4 border-b border-white/10 px-5 py-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">
|
||||
<Link href={indexUrl} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-white transition hover:bg-white/[0.08]">Back to challenges</Link>
|
||||
<span>{destroyUrl ? 'Edit challenge' : 'New challenge'}</span>
|
||||
</div>
|
||||
<h1 className="mt-3 text-3xl font-semibold tracking-[-0.05em] text-white">{form.data.title || 'Untitled academy challenge'}</h1>
|
||||
<p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">{form.data.excerpt || 'Shape a guided creative brief with clear rules, dates, tags, and a public-ready preview.'}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className={`rounded-full border px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] ${status.className}`}>{status.label}</span>
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-300">{form.data.access_level || 'free'}</span>
|
||||
{editorContext?.links?.preview ? <a href={editorContext.links.preview} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-4 py-2 text-sm font-semibold text-sky-100">Preview public page</a> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 px-5 py-5 md:grid-cols-4">
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-4">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Submission window</p>
|
||||
<p className="mt-2 text-sm font-semibold text-white">{submissionWindow || 'Not scheduled'}</p>
|
||||
</div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-4">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Voting window</p>
|
||||
<p className="mt-2 text-sm font-semibold text-white">{votingWindow || 'Not scheduled'}</p>
|
||||
</div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-4">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Required tags</p>
|
||||
<p className="mt-2 text-sm font-semibold text-white">{requiredTags.length}</p>
|
||||
</div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-4">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Brief copy</p>
|
||||
<p className="mt-2 text-sm font-semibold text-white">{briefWordCount.toLocaleString()} words</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<EditorWorkspaceTabs activeTab={activeTab} onChange={setActiveTab} errorCounts={errorCounts} />
|
||||
|
||||
<div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
|
||||
<div className="min-w-0 space-y-6">
|
||||
<SectionCard id="challenge-identity" eyebrow="Challenge identity" title="Name and positioning" description="Keep the title clear, the slug readable, and the card summary useful for academy discovery." className={sectionClassName('challenge-identity')}>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<TextField label="Title" value={form.data.title || ''} onChange={(event) => setTitle(event.target.value)} error={form.errors.title} maxLength={180} placeholder="Creator brief: cinematic wallpaper challenge" />
|
||||
<label className="grid gap-2 text-sm text-slate-300">
|
||||
<span className="flex items-center justify-between gap-3">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Slug</span>
|
||||
<button type="button" onClick={() => {
|
||||
slugTouchedRef.current = false
|
||||
form.setData('slug', slugifyChallengeTitle(form.data.title))
|
||||
}} className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold text-white">Sync</button>
|
||||
</span>
|
||||
<input value={form.data.slug || ''} onChange={(event) => {
|
||||
slugTouchedRef.current = String(event.target.value).trim() !== ''
|
||||
form.setData('slug', event.target.value)
|
||||
}} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" maxLength={180} placeholder="cinematic-wallpaper-challenge" />
|
||||
<FieldError message={form.errors.slug} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<TextAreaField label="Excerpt" value={form.data.excerpt || ''} onChange={(event) => form.setData('excerpt', event.target.value)} error={form.errors.excerpt} rows={4} hint="Short public summary used on challenge cards and academy home rails." />
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<NovaSelect label={accessField?.label || 'Access'} value={form.data.access_level || ''} onChange={(nextValue) => form.setData('access_level', String(nextValue || ''))} options={accessField?.options || []} searchable={false} className="bg-black/20" error={form.errors.access_level} />
|
||||
<TextField label="Public path" value={publicPathPreview} readOnly hint="Generated from the slug. Published challenge pages use this path." />
|
||||
</div>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard id="challenge-brief" eyebrow="Creative brief" title="Brief and creator direction" description="Write the task in a way creators can execute without needing extra staff notes." tone="feature" className={sectionClassName('challenge-brief')}>
|
||||
<TextAreaField label="Description" value={form.data.description || ''} onChange={(event) => form.setData('description', event.target.value)} error={form.errors.description} rows={6} hint="Overview copy for the challenge page. Plain text is safest here because public challenge pages preserve line breaks." placeholder="Introduce the creative goal, theme, and expected output." />
|
||||
<TextAreaField label="Brief" value={form.data.brief || ''} onChange={(event) => form.setData('brief', event.target.value)} error={form.errors.brief} rows={10} hint="The main actionable brief. Use line breaks for steps, constraints, or judging criteria." placeholder="Objective, deliverable, style direction, and acceptance notes." />
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard id="challenge-rules" eyebrow="Rules and eligibility" title="Requirements and rewards" description="Keep challenge operations close to the brief so staff can audit everything before launch." className={sectionClassName('challenge-rules')}>
|
||||
<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(260px,0.72fr)]">
|
||||
<TextAreaField label="Rules" value={form.data.rules || ''} onChange={(event) => form.setData('rules', event.target.value)} error={form.errors.rules} rows={10} hint="Submission rules, judging notes, restrictions, and moderation expectations." />
|
||||
<div className="grid gap-4">
|
||||
<TextField label="Prize text" value={form.data.prize_text || ''} onChange={(event) => form.setData('prize_text', event.target.value)} error={form.errors.prize_text} maxLength={180} placeholder="Featured placement plus Academy badge" />
|
||||
<TextAreaField label="Required tags" value={form.data.required_tags || ''} onChange={(event) => form.setData('required_tags', event.target.value)} error={form.errors.required_tags} rows={4} hint="Comma-separated or one per line. Saved as an array." placeholder="academy-challenge, cinematic, wallpaper" />
|
||||
<TextAreaField label="Allowed categories" value={form.data.allowed_categories || ''} onChange={(event) => form.setData('allowed_categories', event.target.value)} error={form.errors.allowed_categories} rows={4} hint="Comma-separated or one per line. Saved as an array." placeholder="Wallpapers, Skins, Worlds" />
|
||||
</div>
|
||||
</div>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard id="challenge-media" eyebrow="Visual system" title="Cover media" description="Upload clean landscape imagery that works in public challenge cards and the challenge detail hero." className={sectionClassName('challenge-media')}>
|
||||
<div className="grid gap-6 lg:grid-cols-2 lg:items-start">
|
||||
<div className="space-y-4">
|
||||
<WorldMediaUploadField
|
||||
label="Cover image"
|
||||
slot="cover"
|
||||
value={form.data.cover_image}
|
||||
previewUrl={coverPreviewUrl}
|
||||
emptyLabel="Challenge cover"
|
||||
helperText="Use a landscape JPG, PNG, or WEBP. Minimum upload is 600x315; a 16:9 cover will crop best across academy surfaces."
|
||||
uploadUrl={editorContext.coverUploadUrl}
|
||||
deleteUrl={editorContext.coverDeleteUrl}
|
||||
isTemporaryValue={Boolean(stagedCoverPath) && stagedCoverPath === form.data.cover_image}
|
||||
onChange={({ path, url }) => {
|
||||
setStagedCoverPath(path || '')
|
||||
form.setData('cover_image', path || '')
|
||||
setCoverPreviewUrl(url || normalizeAssetPreview(path || '', editorContext.coverCdnBaseUrl))
|
||||
}}
|
||||
/>
|
||||
<FieldError message={form.errors.cover_image} />
|
||||
<TextField label="Advanced cover path or URL" value={form.data.cover_image || ''} onChange={(event) => handleManualCoverChange(event.target.value)} error={form.errors.cover_image} placeholder="Optional external URL or stored object path" />
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-[28px] border border-white/10 bg-slate-950">
|
||||
{coverPreviewUrl ? (
|
||||
<img src={coverPreviewUrl} alt="Challenge cover preview" className="h-72 w-full object-cover" />
|
||||
) : (
|
||||
<div className="flex h-72 items-center justify-center px-6 text-center text-sm text-slate-500">No challenge cover selected yet.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard id="challenge-timeline" eyebrow="Timeline" title="Submission and voting windows" description="Set the dates that move the challenge from scheduled, to active, to voting, then completed." className={sectionClassName('challenge-timeline')}>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<DateTimePicker label="Starts at" value={form.data.starts_at || ''} onChange={(nextValue) => form.setData('starts_at', nextValue || '')} error={form.errors.starts_at} clearable className="bg-black/20" />
|
||||
<DateTimePicker label="Ends at" value={form.data.ends_at || ''} onChange={(nextValue) => form.setData('ends_at', nextValue || '')} error={form.errors.ends_at} clearable className="bg-black/20" />
|
||||
<DateTimePicker label="Voting starts at" value={form.data.voting_starts_at || ''} onChange={(nextValue) => form.setData('voting_starts_at', nextValue || '')} error={form.errors.voting_starts_at} clearable className="bg-black/20" />
|
||||
<DateTimePicker label="Voting ends at" value={form.data.voting_ends_at || ''} onChange={(nextValue) => form.setData('voting_ends_at', nextValue || '')} error={form.errors.voting_ends_at} clearable className="bg-black/20" />
|
||||
</div>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard id="challenge-publishing" eyebrow="Publishing" title="Status and visibility" description="Choose how this challenge behaves in academy discovery and whether it appears in featured placements." className={sectionClassName('challenge-publishing')}>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<NovaSelect label={statusField?.label || 'Status'} value={form.data.status || ''} onChange={(nextValue) => form.setData('status', String(nextValue || ''))} options={statusField?.options || []} searchable={false} className="bg-black/20" error={form.errors.status} />
|
||||
<ToggleField label="Featured" checked={Boolean(form.data.featured)} onChange={(event) => form.setData('featured', event.target.checked)} help="Promote this challenge on academy rails." error={form.errors.featured} />
|
||||
<ToggleField label="Active" checked={Boolean(form.data.active)} onChange={(event) => form.setData('active', event.target.checked)} help="Inactive challenges stay hidden even when their status is public." error={form.errors.active} />
|
||||
</div>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard id="challenge-preview" eyebrow="Preview" title="Public-facing snapshot" description="Scan the challenge card, brief, rules, tags, and timeline before saving." tone="feature" className={sectionClassName('challenge-preview')}>
|
||||
<div className="grid gap-5 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1fr)]">
|
||||
<div className="overflow-hidden rounded-[28px] border border-white/10 bg-slate-950">
|
||||
{coverPreviewUrl ? (
|
||||
<img src={coverPreviewUrl} alt="Challenge preview" className="h-64 w-full object-cover" />
|
||||
) : (
|
||||
<div className="flex h-64 items-center justify-center px-6 text-center text-sm text-slate-500">No cover image selected yet.</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="rounded-[28px] border border-white/10 bg-black/20 p-5">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className={`rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${status.className}`}>{status.label}</span>
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-200">{form.data.access_level || 'free'}</span>
|
||||
{form.data.featured ? <span className="rounded-full border border-amber-300/20 bg-amber-300/15 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-100">Featured</span> : null}
|
||||
</div>
|
||||
<h3 className="mt-4 text-3xl font-semibold tracking-[-0.05em] text-white">{form.data.title || 'Untitled academy challenge'}</h3>
|
||||
<p className="mt-3 text-sm leading-7 text-slate-300">{form.data.excerpt || 'Add a short challenge summary to explain what creators are building.'}</p>
|
||||
{form.data.prize_text ? <p className="mt-4 rounded-2xl border border-[#f39a24]/20 bg-[#f39a24]/10 px-4 py-3 text-sm font-semibold text-[#ffd5cd]">{form.data.prize_text}</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid gap-4 lg:grid-cols-2">
|
||||
<PlainTextPreview title="Brief preview" value={form.data.brief || form.data.description} fallback="The challenge brief is still empty." />
|
||||
<PlainTextPreview title="Rules preview" value={form.data.rules} fallback="No special rules posted yet." />
|
||||
</div>
|
||||
</SectionCard>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 xl:sticky xl:top-6 xl:self-start">
|
||||
<SectionCard eyebrow="At a glance" title="Challenge summary" description="A compact view of the details editors usually check before launch.">
|
||||
<div className="rounded-[24px] border border-sky-300/18 bg-sky-300/8 p-4">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100/80">Public path</p>
|
||||
<p className="mt-2 break-all text-sm font-semibold text-white">{publicPathPreview}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-4">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Status</p>
|
||||
<p className="mt-2 text-sm font-semibold text-white">{status.label}</p>
|
||||
</div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-4">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Cover</p>
|
||||
<p className="mt-2 text-sm font-semibold text-white">{coverPreviewUrl ? 'Ready' : 'Missing'}</p>
|
||||
</div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-4">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Submissions</p>
|
||||
<p className="mt-2 text-sm font-semibold text-white">{formatDateLabel(form.data.starts_at)} to {formatDateLabel(form.data.ends_at)}</p>
|
||||
</div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-4">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Voting</p>
|
||||
<p className="mt-2 text-sm font-semibold text-white">{formatDateLabel(form.data.voting_starts_at)} to {formatDateLabel(form.data.voting_ends_at)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard eyebrow="Requirements" title="Tags and categories" description="A quick scan of the saved arrays before the challenge opens.">
|
||||
<div className="grid gap-4">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Required tags</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{requiredTags.length ? requiredTags.map((tag) => <span key={tag} className="rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-1.5 text-xs font-semibold text-sky-100">{tag}</span>) : <span className="text-sm text-slate-500">No required tags yet.</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Allowed categories</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{allowedCategories.length ? allowedCategories.map((category) => <span key={category} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-semibold text-slate-200">{category}</span>) : <span className="text-sm text-slate-500">All categories are allowed unless you add limits.</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SectionCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-3 rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
|
||||
<button type="submit" disabled={form.processing} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100">{form.processing ? 'Saving...' : 'Save challenge'}</button>
|
||||
<Link href={indexUrl} className="rounded-full border border-white/10 bg-white/[0.04] px-5 py-3 text-sm font-semibold text-white">Back</Link>
|
||||
{destroyUrl ? <button type="button" onClick={deleteChallenge} className="rounded-full border border-rose-300/20 bg-rose-300/10 px-5 py-3 text-sm font-semibold text-rose-100">Delete</button> : null}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<ShareToast
|
||||
key={toast.id}
|
||||
message={toast.message}
|
||||
visible={toast.visible}
|
||||
variant={toast.variant}
|
||||
duration={toast.variant === 'error' ? 3200 : 2200}
|
||||
onHide={() => setToast((current) => ({ ...current, visible: false }))}
|
||||
/>
|
||||
</AdminLayout>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user