Save workspace changes

.deploy/artwork-evolution-release/resources/js/components/upload/UploadSidebar.jsx

@@ -0,0 +1,132 @@
+import React from 'react'
+import TagPicker from '../tags/TagPicker'
+import Checkbox from '../../Components/ui/Checkbox'
+import RichTextEditor from '../forum/RichTextEditor'
+import SchedulePublishPicker from './SchedulePublishPicker'
+
+export default function UploadSidebar({
+  title = 'Artwork details',
+  description = 'Complete metadata before publishing',
+  showHeader = true,
+  metadata,
+  suggestedTags = [],
+  errors = {},
+  publishMode,
+  scheduledAt,
+  timezone,
+  onPublishModeChange,
+  onScheduleAt,
+  onChangeTitle,
+  onChangeTags,
+  onChangeDescription,
+  onToggleMature,
+  onToggleRights,
+}) {
+  return (
+    <div className="space-y-5">
+      {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={30}
+            searchEndpoint="/api/tags/search"
+            popularEndpoint="/api/tags/popular"
+            error={errors.tags}
+          />
+        </section>
+
+        {typeof publishMode === 'string' && typeof onPublishModeChange === 'function' && (
+          <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">Publish settings</h4>
+              <p className="mt-1 text-xs text-white/60">Choose whether this artwork should publish immediately or on a schedule.</p>
+            </div>
+
+            <SchedulePublishPicker
+              mode={publishMode}
+              scheduledAt={scheduledAt}
+              timezone={timezone}
+              onModeChange={onPublishModeChange}
+              onScheduleAt={onScheduleAt}
+              disabled={false}
+            />
+          </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>
+    </div>
+  )
+}