68 lines
4.2 KiB
JavaScript
68 lines
4.2 KiB
JavaScript
import React from 'react'
|
|
import { Head, useForm } from '@inertiajs/react'
|
|
import SeoHead from '../../components/seo/SeoHead'
|
|
import NovaSelect from '../../components/ui/NovaSelect'
|
|
|
|
export default function AcademyChallengeSubmit({ seo, challenge, artworks, submitUrl }) {
|
|
const form = useForm({
|
|
artwork_id: artworks[0]?.id || '',
|
|
prompt_used: '',
|
|
workflow_notes: '',
|
|
ai_tool_used: '',
|
|
is_ai_generated: false,
|
|
is_ai_assisted: true,
|
|
})
|
|
|
|
const artworkOptions = artworks.map((artwork) => ({ value: artwork.id, label: artwork.title }))
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.15),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(251,191,36,0.16),_transparent_24%),linear-gradient(180deg,_#0f172a_0%,_#111827_100%)] px-4 py-8 sm:px-6 lg:px-8">
|
|
<Head title={`Submit to ${challenge.title}`} />
|
|
<SeoHead seo={seo || {}} title={`Submit to ${challenge.title}`} description={challenge.excerpt || challenge.description} />
|
|
|
|
<div className="mx-auto max-w-[960px] space-y-6">
|
|
<section className="rounded-[38px] border border-white/10 bg-black/20 p-8 md:p-10">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">Academy challenge</p>
|
|
<h1 className="mt-3 text-4xl font-semibold tracking-[-0.05em] text-white md:text-5xl">Submit to {challenge.title}</h1>
|
|
<p className="mt-4 text-base leading-8 text-slate-300">Attach one of your public artworks and optionally include the prompt or workflow notes used to create it.</p>
|
|
</section>
|
|
|
|
<form onSubmit={(event) => { event.preventDefault(); form.post(submitUrl) }} className="space-y-5 rounded-[30px] border border-white/10 bg-white/[0.04] p-6">
|
|
<div>
|
|
<label className="text-sm font-semibold text-white">Artwork</label>
|
|
<NovaSelect
|
|
value={form.data.artwork_id}
|
|
onChange={(nextValue) => form.setData('artwork_id', nextValue || '')}
|
|
options={artworkOptions}
|
|
placeholder="Select artwork"
|
|
className="mt-2 rounded-2xl bg-black/20"
|
|
/>
|
|
{form.errors.artwork_id ? <p className="mt-2 text-sm text-rose-300">{form.errors.artwork_id}</p> : null}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-sm font-semibold text-white">Prompt used</label>
|
|
<textarea value={form.data.prompt_used} onChange={(event) => form.setData('prompt_used', event.target.value)} rows={5} className="mt-2 w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none" />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-sm font-semibold text-white">Workflow notes</label>
|
|
<textarea value={form.data.workflow_notes} onChange={(event) => form.setData('workflow_notes', event.target.value)} rows={4} className="mt-2 w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none" />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-sm font-semibold text-white">AI tool used</label>
|
|
<input value={form.data.ai_tool_used} onChange={(event) => form.setData('ai_tool_used', event.target.value)} className="mt-2 w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none" />
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<label className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-200"><input type="checkbox" checked={form.data.is_ai_generated} onChange={(event) => form.setData('is_ai_generated', event.target.checked)} /> AI-generated</label>
|
|
<label className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-200"><input type="checkbox" checked={form.data.is_ai_assisted} onChange={(event) => form.setData('is_ai_assisted', event.target.checked)} /> AI-assisted</label>
|
|
</div>
|
|
|
|
<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 ? 'Submitting...' : 'Submit artwork'}</button>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
)
|
|
} |