Gregor Klevze
979e011257
Remove dead admin UI code, redesign dashboard followers/following and upload experiences, and add schema audit tooling with repair migrations for forum and upload drift.
94 lines
3.8 KiB
JavaScript
94 lines
3.8 KiB
JavaScript
import React from 'react'
|
|
import TagPicker from '../tags/TagPicker'
|
|
import Checkbox from '../../Components/ui/Checkbox'
|
|
import MarkdownEditor from '../ui/MarkdownEditor'
|
|
|
|
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-[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>
|
|
<MarkdownEditor
|
|
id="upload-sidebar-description"
|
|
value={metadata.description}
|
|
onChange={onChangeDescription}
|
|
placeholder="Describe your artwork (Markdown supported)."
|
|
error={errors.description}
|
|
/>
|
|
{errors.description && <p className="mt-1 text-xs text-red-200">{errors.description}</p>}
|
|
</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-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>
|
|
)
|
|
}
|