77 lines
3.0 KiB
JavaScript
77 lines
3.0 KiB
JavaScript
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>
|
|
)
|
|
}
|