97 lines
4.2 KiB
JavaScript
97 lines
4.2 KiB
JavaScript
import React from 'react'
|
|
import TagInput from '../tags/TagInput'
|
|
|
|
export default function UploadSidebar({
|
|
title = 'Artwork details',
|
|
description = 'Complete metadata before publishing',
|
|
showHeader = true,
|
|
metadata,
|
|
suggestedTags = [],
|
|
errors = {},
|
|
onChangeTitle,
|
|
onChangeTags,
|
|
onChangeDescription,
|
|
onToggleRights,
|
|
}) {
|
|
return (
|
|
<aside className="rounded-2xl border border-white/7 bg-gradient-to-br from-slate-900/55 to-slate-900/35 p-6 shadow-[0_10px_24px_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-xl border border-white/10 bg-white/[0.03] p-4">
|
|
<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>
|
|
<textarea
|
|
id="upload-sidebar-description"
|
|
value={metadata.description}
|
|
onChange={(event) => onChangeDescription?.(event.target.value)}
|
|
rows={5}
|
|
className="mt-2 w-full rounded-xl border border-white/15 bg-white/10 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-sky-300/70"
|
|
placeholder="Describe your artwork (Markdown supported)."
|
|
/>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-xl border border-white/10 bg-white/[0.03] p-4">
|
|
<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>
|
|
<TagInput
|
|
value={metadata.tags}
|
|
onChange={(nextTags) => onChangeTags?.(nextTags)}
|
|
suggestedTags={suggestedTags}
|
|
maxTags={15}
|
|
minLength={2}
|
|
maxLength={32}
|
|
searchEndpoint="/api/tags/search"
|
|
popularEndpoint="/api/tags/popular"
|
|
placeholder="Type tags (e.g. cyberpunk, city)"
|
|
/>
|
|
</section>
|
|
|
|
<section className="rounded-xl border border-white/10 bg-white/[0.03] p-4">
|
|
<label className="flex items-start gap-3 text-sm text-white/90">
|
|
<input
|
|
id="upload-sidebar-rights"
|
|
type="checkbox"
|
|
checked={Boolean(metadata.rightsAccepted)}
|
|
onChange={(event) => onToggleRights?.(event.target.checked)}
|
|
className="mt-0.5 h-5 w-5 rounded-md border border-white/30 bg-slate-900/70 text-emerald-400 accent-emerald-500 focus:ring-2 focus:ring-emerald-400/40"
|
|
/>
|
|
<span>
|
|
I confirm I own the rights to this content. <span className="text-red-300">*</span>
|
|
<span className="mt-1 block text-xs text-white/60">Required before publishing.</span>
|
|
{errors.rights && <span className="mt-1 block text-xs text-red-200">{errors.rights}</span>}
|
|
</span>
|
|
</label>
|
|
</section>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|