109 lines
4.3 KiB
JavaScript
109 lines
4.3 KiB
JavaScript
import React from 'react'
|
|
import TagPicker from '../tags/TagPicker'
|
|
import Checkbox from '../../Components/ui/Checkbox'
|
|
import RichTextEditor from '../forum/RichTextEditor'
|
|
|
|
export default function UploadSidebar({
|
|
title = 'Artwork details',
|
|
description = 'Complete metadata before publishing',
|
|
showHeader = true,
|
|
metadata,
|
|
suggestedTags = [],
|
|
errors = {},
|
|
onChangeTitle,
|
|
onChangeTags,
|
|
onChangeDescription,
|
|
onToggleMature,
|
|
onToggleRights,
|
|
}) {
|
|
return (
|
|
<aside className="rounded-[28px] border border-white/8 bg-gradient-to-br from-slate-900/55 to-slate-900/35 p-6 shadow-[0_18px_60px_rgba(0,0,0,0.22)] sm:p-7">
|
|
{showHeader && (
|
|
<div className="mb-5 rounded-xl border border-white/8 bg-white/[0.04] p-4">
|
|
<h3 className="text-lg font-semibold text-white">{title}</h3>
|
|
<p className="mt-1 text-sm text-white/65">{description}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-5">
|
|
<section className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
|
|
<div className="mb-3">
|
|
<h4 className="text-sm font-semibold text-white">Basics</h4>
|
|
<p className="mt-1 text-xs text-white/60">Add a clear title and short description.</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<label className="block">
|
|
<span className="text-sm font-medium text-white/90">Title <span className="text-red-300">*</span></span>
|
|
<input
|
|
id="upload-sidebar-title"
|
|
value={metadata.title}
|
|
onChange={(event) => onChangeTitle?.(event.target.value)}
|
|
className={`mt-2 w-full rounded-xl border bg-white/10 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 ${errors.title ? 'border-red-300/60 focus:ring-red-300/70' : 'border-white/15 focus:ring-sky-300/70'}`}
|
|
placeholder="Give your artwork a clear title"
|
|
/>
|
|
{errors.title && <p className="mt-1 text-xs text-red-200">{errors.title}</p>}
|
|
</label>
|
|
|
|
<label className="block">
|
|
<span className="text-sm font-medium text-white/90">Description <span className="text-red-300">*</span></span>
|
|
<div className="mt-2">
|
|
<RichTextEditor
|
|
content={metadata.description}
|
|
onChange={onChangeDescription}
|
|
placeholder="Describe your artwork, tools, inspiration…"
|
|
error={Array.isArray(errors.description) ? errors.description[0] : errors.description}
|
|
minHeight={12}
|
|
autofocus={false}
|
|
/>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
|
|
<div className="mb-3">
|
|
<h4 className="text-sm font-semibold text-white">Tags</h4>
|
|
<p className="mt-1 text-xs text-white/60">Use keywords people would search for. Press Enter, comma, or Tab to add a tag.</p>
|
|
</div>
|
|
<TagPicker
|
|
value={metadata.tags}
|
|
onChange={(nextTags) => onChangeTags?.(nextTags)}
|
|
suggestedTags={suggestedTags}
|
|
maxTags={15}
|
|
searchEndpoint="/api/tags/search"
|
|
popularEndpoint="/api/tags/popular"
|
|
error={errors.tags}
|
|
/>
|
|
</section>
|
|
|
|
<section className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
|
|
<Checkbox
|
|
id="upload-sidebar-mature"
|
|
checked={Boolean(metadata.isMature)}
|
|
onChange={(event) => onToggleMature?.(event.target.checked)}
|
|
variant="accent"
|
|
size={20}
|
|
label="Mark this artwork as mature content."
|
|
hint="Use this for NSFW, explicit, or otherwise age-restricted artwork."
|
|
/>
|
|
</section>
|
|
|
|
<section className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
|
|
<Checkbox
|
|
id="upload-sidebar-rights"
|
|
checked={Boolean(metadata.rightsAccepted)}
|
|
onChange={(event) => onToggleRights?.(event.target.checked)}
|
|
variant="emerald"
|
|
size={20}
|
|
label="I confirm I own the rights to this content."
|
|
hint="Required before publishing."
|
|
error={errors.rights}
|
|
required
|
|
/>
|
|
</section>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|