Upload beautify

resources/js/components/upload/UploadSidebar.jsx

@@ -0,0 +1,96 @@
+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>
+  )
+}