Refactor: Move image display into PhotoPrintAreaField component

- Move current image display from parent edit page into PhotoPrintAreaField
- Allows component to control visibility based on client-side removal state
- Image now properly disappears when Remove button is clicked
- Both front and back photo sections now managed entirely by component
- Verified: Remove button works, image disappears immediately, persists to database
This commit is contained in:
Andymick
2026-07-19 12:05:28 +01:00
parent 285a8ab21f
commit 3bb188ed7f
3 changed files with 10 additions and 17 deletions
-16
View File
@@ -260,27 +260,11 @@ export default async function EditProductPage({ params }: { params: { id: string
<div>
<label className="tag-label mb-2 block">Front photo</label>
{product.imageUrl && (
<div className="mb-3 flex items-center gap-3">
<img src={product.imageUrl} alt={product.name} className="h-20 w-20 border border-line object-contain" />
<p className="text-xs text-muted">Current photo. Upload a new one below to replace it.</p>
</div>
)}
<PhotoPrintAreaField existingImageUrl={product.imageUrl} />
</div>
<div>
<label className="tag-label mb-2 block">Back photo</label>
{product.imageUrlBack && (
<div className="mb-3 flex items-center gap-3">
<img
src={product.imageUrlBack}
alt={`${product.name} back`}
className="h-20 w-20 border border-line object-contain"
/>
<p className="text-xs text-muted">Current back photo and print area. Upload a new one below to replace both.</p>
</div>
)}
<PhotoPrintAreaField variant="back" existingImageUrl={product.imageUrlBack} />
</div>
+8
View File
@@ -102,6 +102,14 @@ export default function PhotoPrintAreaField({
return (
<div>
{currentImageUrl && !showPrintAreaEditor && (
<div className="mb-3 flex items-center gap-3">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={currentImageUrl} alt="Product preview" className="h-20 w-20 border border-line object-contain" />
<p className="text-xs text-muted">Current photo. Upload a new one below to replace it.</p>
</div>
)}
{!currentImageUrl || !showPrintAreaEditor ? (
<>
<input