From 2712757de95a56c5caed829c44bf268ba7c8f152 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Sun, 6 Apr 2025 23:06:23 +0100
Subject: [PATCH] feat: show placeholders for mii and qr code images in submit
 form

---
 src/app/components/submit-form.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/app/components/submit-form.tsx b/src/app/components/submit-form.tsx
index da7b307..aabe24d 100644
--- a/src/app/components/submit-form.tsx
+++ b/src/app/components/submit-form.tsx
@@ -151,16 +151,14 @@ export default function SubmitForm() {
 		<form onSubmit={handleSubmit} className="grid grid-cols-2 max-md:grid-cols-1">
 			<div className="p-4 flex flex-col gap-2 max-md:order-2">
 				<div className="flex justify-center gap-2">
-					<img
-						src={studioUrl}
-						alt="Nintendo Studio URL"
-						className="aspect-square size-32 bg-orange-100 rounded-xl border-2 border-amber-500 text-[0px]"
-					/>
-					<img
-						src={generatedQrCodeUrl}
-						alt="Generated QR Code"
-						className="aspect-square size-32 bg-orange-100 rounded-xl border-2 border-amber-500 text-[0px]"
-					/>
+					<div className="relative flex justify-center items-center size-32 aspect-square bg-orange-100 rounded-xl border-2 border-amber-500">
+						{!studioUrl && <span className="absolute text-center font-light">Mii</span>}
+						<img src={studioUrl} alt="Nintendo Studio URL" className="size-full rounded-xl text-[0px]" />
+					</div>
+					<div className="relative flex justify-center items-center size-32 aspect-square bg-orange-100 rounded-xl border-2 border-amber-500">
+						{!generatedQrCodeUrl && <span className="absolute text-center font-light">QR Code</span>}
+						<img src={generatedQrCodeUrl} alt="Generated QR Code" className="size-full rounded-xl text-[0px]" />
+					</div>
 				</div>
 
 				<div className="p-2 border-2 bg-orange-200 border-amber-500 rounded-2xl shadow-lg h-48">