optimizations
This commit is contained in:
@@ -38,6 +38,7 @@ const initialState = {
|
||||
category: '',
|
||||
tags: '',
|
||||
description: '',
|
||||
isMature: false,
|
||||
licenseAccepted: false,
|
||||
},
|
||||
}
|
||||
@@ -300,6 +301,7 @@ function useUploadMachine({ draftId, filesCdnUrl, chunkSize, userId }) {
|
||||
category: state.metadata.category,
|
||||
tags: state.metadata.tags,
|
||||
description: state.metadata.description,
|
||||
is_mature: state.metadata.isMature,
|
||||
license: state.metadata.licenseAccepted,
|
||||
})
|
||||
|
||||
@@ -610,59 +612,8 @@ export default function UploadPage({ draftId, filesCdnUrl, chunkSize }) {
|
||||
<div className="relative isolate overflow-hidden">
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[420px] bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.22),_transparent_32%),radial-gradient(circle_at_top_right,_rgba(251,146,60,0.16),_transparent_30%),linear-gradient(180deg,_rgba(8,17,28,0.98),_rgba(7,17,28,1))]" />
|
||||
<div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
|
||||
{/* ── Wizard ─────────────────────────────────────────────────────── */}
|
||||
<div className="overflow-hidden rounded-[32px] border border-white/10 bg-[#08111c]/92 shadow-[0_30px_120px_rgba(2,8,23,0.38)]">
|
||||
<div className="grid gap-8 border-b border-white/8 px-5 py-6 sm:px-8 lg:grid-cols-[1.45fr_0.85fr] lg:items-start lg:gap-10 lg:py-8">
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-[0.28em] text-sky-200/80">Skinbase Upload Studio</p>
|
||||
<h1 className="mt-3 max-w-3xl text-3xl font-semibold tracking-tight text-white sm:text-4xl">
|
||||
Upload artwork with less friction and better control.
|
||||
</h1>
|
||||
<p className="mt-4 max-w-2xl text-sm leading-7 text-slate-300 sm:text-base">
|
||||
The upload flow now stays focused on three steps: add the file, finish the metadata, then publish with confidence. The interface is simpler, but the secure processing pipeline stays intact.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 grid gap-3 sm:grid-cols-3">
|
||||
{[
|
||||
{
|
||||
title: 'Fast onboarding',
|
||||
description: 'Clearer file requirements and a friendlier first step.',
|
||||
},
|
||||
{
|
||||
title: 'Safer publishing',
|
||||
description: 'Processing state, rights, and readiness stay visible the whole time.',
|
||||
},
|
||||
{
|
||||
title: 'Cleaner review',
|
||||
description: 'Metadata and publish options are easier to scan before going live.',
|
||||
},
|
||||
].map((item) => (
|
||||
<div key={item.title} className="rounded-2xl border border-white/8 bg-white/[0.04] p-4">
|
||||
<p className="text-sm font-semibold text-white">{item.title}</p>
|
||||
<p className="mt-2 text-sm leading-6 text-slate-300">{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside className="rounded-[28px] border border-white/8 bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-5 shadow-[0_18px_70px_rgba(0,0,0,0.16)]">
|
||||
<p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/70">Before you start</p>
|
||||
<div className="mt-4 space-y-4">
|
||||
{[
|
||||
'Choose the final file you actually want published. Replacing after upload requires a reset.',
|
||||
'ZIP, RAR, and 7Z packs still need at least one screenshot for preview generation.',
|
||||
'You will confirm rights and visibility before the final publish step.',
|
||||
].map((item, index) => (
|
||||
<div key={item} className="flex items-start gap-3">
|
||||
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-sky-300/20 bg-sky-400/10 text-xs font-semibold text-sky-100">
|
||||
{index + 1}
|
||||
</span>
|
||||
<p className="text-sm leading-6 text-slate-300">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-5 sm:px-6 lg:px-8 lg:py-8">
|
||||
<UploadWizard
|
||||
initialDraftId={draftId ?? null}
|
||||
@@ -672,6 +623,59 @@ export default function UploadPage({ draftId, filesCdnUrl, chunkSize }) {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Help / info section ─────────────────────────────────────────── */}
|
||||
<div className="mt-8 grid gap-8 lg:grid-cols-[1.45fr_0.85fr] lg:items-start lg:gap-10">
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-[0.28em] text-sky-200/50">Skinbase Upload Studio</p>
|
||||
<h2 className="mt-3 max-w-3xl text-xl font-semibold tracking-tight text-white/70 sm:text-2xl">
|
||||
Upload artwork with less friction and better control.
|
||||
</h2>
|
||||
<p className="mt-3 max-w-2xl text-sm leading-7 text-slate-400">
|
||||
The upload flow now stays focused on three steps: add the file, finish the metadata, then publish with confidence. The interface is simpler, but the secure processing pipeline stays intact.
|
||||
</p>
|
||||
|
||||
<div className="mt-5 grid gap-3 sm:grid-cols-3">
|
||||
{[
|
||||
{
|
||||
title: 'Fast onboarding',
|
||||
description: 'Clearer file requirements and a friendlier first step.',
|
||||
},
|
||||
{
|
||||
title: 'Safer publishing',
|
||||
description: 'Processing state, rights, and readiness stay visible the whole time.',
|
||||
},
|
||||
{
|
||||
title: 'Cleaner review',
|
||||
description: 'Metadata and publish options are easier to scan before going live.',
|
||||
},
|
||||
].map((item) => (
|
||||
<div key={item.title} className="rounded-2xl border border-white/6 bg-white/[0.02] p-4">
|
||||
<p className="text-sm font-semibold text-white/70">{item.title}</p>
|
||||
<p className="mt-2 text-sm leading-6 text-slate-500">{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside className="rounded-[28px] border border-white/6 bg-white/[0.02] p-5">
|
||||
<p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/50">Before you start</p>
|
||||
<div className="mt-4 space-y-4">
|
||||
{[
|
||||
'Choose the final file you actually want published. Replacing after upload requires a reset.',
|
||||
'ZIP, RAR, and 7Z packs still need at least one screenshot for preview generation.',
|
||||
'You will confirm rights and visibility before the final publish step.',
|
||||
].map((item, index) => (
|
||||
<div key={item} className="flex items-start gap-3">
|
||||
<span className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/5 text-xs font-semibold text-slate-400">
|
||||
{index + 1}
|
||||
</span>
|
||||
<p className="text-sm leading-6 text-slate-500">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1005,6 +1009,16 @@ export default function UploadPage({ draftId, filesCdnUrl, chunkSize }) {
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="mt-4">
|
||||
<Checkbox
|
||||
checked={state.metadata.isMature}
|
||||
onChange={(e) => dispatch({ type: 'SET_METADATA', payload: { isMature: e.target.checked } })}
|
||||
size={16}
|
||||
variant="accent"
|
||||
label="Mark this artwork as mature content."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<Checkbox
|
||||
checked={state.metadata.licenseAccepted}
|
||||
|
||||
Reference in New Issue
Block a user