Upload beautify

resources/js/components/upload/UploadPreview.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+
+export default function UploadPreview({
+  title = 'Preview',
+  description = 'Live artwork preview placeholder',
+  previewUrl = '',
+  isArchive = false,
+  metadata = {
+    resolution: '—',
+    size: '—',
+    type: '—',
+  },
+  warnings = [],
+  errors = [],
+  invalid = false,
+}) {
+  return (
+    <section className={`rounded-xl border bg-gradient-to-br p-5 shadow-[0_12px_32px_rgba(0,0,0,0.35)] transition-colors sm:p-6 ${invalid ? 'border-red-400/45 from-red-500/10 to-slate-900/45' : 'border-white/50 from-slate-900/80 to-slate-900/45'}`}>
+      {/* Intended props: file, previewUrl, isArchive, dimensions, fileSize, format, warning */}
+      <div className={`rounded-xl border p-4 transition-colors ${invalid ? 'border-red-300/45 bg-red-500/5' : 'border-white/50 bg-black/25'}`}>
+        <div className="flex items-center justify-between gap-3">
+          <h3 className="text-lg font-semibold text-white">{title}</h3>
+          <span className="rounded-full border border-white/15 bg-white/5 px-2.5 py-1 text-[11px] text-white/65">
+            {isArchive ? 'Archive' : 'Image'}
+          </span>
+        </div>
+        <p className="mt-1 text-sm text-white/65">{description}</p>
+
+        <div className="mt-4 flex flex-col md:flex-row gap-4 items-start">
+          <div className="w-40 h-40 rounded-lg overflow-hidden bg-black/40 ring-1 ring-white/10 flex items-center justify-center">
+            {previewUrl && !isArchive ? (
+              <img src={previewUrl} alt="Upload preview" className="max-w-full max-h-full object-contain" />
+            ) : (
+              <span className="text-sm text-soft">{isArchive ? 'Archive selected' : 'Image preview placeholder'}</span>
+            )}
+          </div>
+
+          <div className="flex-1 space-y-2 text-sm">
+            <div>
+              <span className="text-soft">Type</span>
+              <span className="text-white ml-2">{metadata.type}</span>
+            </div>
+            <div>
+              <span className="text-soft">Size</span>
+              <span className="text-white ml-2">{metadata.size}</span>
+            </div>
+            <div>
+              <span className="text-soft">Resolution</span>
+              <span className="text-white ml-2">{metadata.resolution}</span>
+            </div>
+            {errors.length > 0 && (
+              <ul className="space-y-1" role="status" aria-live="polite">
+                {errors.map((error, index) => (
+                  <li key={`${error}-${index}`} className="text-red-400 text-xs">
+                    {error}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+
+        {warnings.length > 0 && (
+          <ul className="mt-4 space-y-1 text-xs text-amber-100" role="status" aria-live="polite">
+            {warnings.map((warning, index) => (
+              <li key={`${warning}-${index}`} className="rounded-md border border-amber-300/35 bg-amber-500/10 px-2 py-1">
+                {warning}
+              </li>
+            ))}
+          </ul>
+        )}
+
+      </div>
+    </section>
+  )
+}