Merge pull request #21 from ytak-sagit/feature/#17-set-placeholder-image

#17: QRコード生成前にプレースホルダ画像を表示しておくように対応
ytak-sagit · Dec 28, 2024 · 66675bc · 66675bc
2 parents 3cf2009 + 1b84d32
commit 66675bc
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -3,8 +3,10 @@
 
 <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>QR Code Generator</title>
     <base data-trunk-public-url />
+    <link data-trunk rel="copy-dir" href="public" />
 </head>
 
 <body></body>

diff --git a/public/icon-success.svg b/public/icon-success.svg
diff --git a/public/placeholder.svg b/public/placeholder.svg
diff --git a/src/main.rs b/src/main.rs
@@ -37,7 +37,9 @@ fn app() -> Html {
                 </label>
                 <button type="submit">{"Generate QR Code"}</button>
             </form>
-            <QrCodeImage url={(*url_updator).clone()} />
+            <div>
+                <QrCodeImage url={(*url_updator).clone()} />
+            </div>
         </main>
     }
 }
@@ -50,10 +52,14 @@ struct QrCodeProps {
 #[function_component(QrCodeImage)]
 fn qr_code_image(props: &QrCodeProps) -> Html {
     let QrCodeProps { url } = props.clone();
-    let url = url.clone();
+
     if url.is_empty() {
-        // TODO: ここにQRコードが出力されることを示す、プレースホルダ画像を表示したい
-        return Html::default();
+        return html! {
+            <>
+                <p>{"QR code will be displayed below."}</p>
+                <img src="public/placeholder.svg" alt="placeholder" />
+            </>
+        };
     }
 
     let base64_encoded_image_data =
@@ -62,6 +68,10 @@ fn qr_code_image(props: &QrCodeProps) -> Html {
     // TODO: QRコードが表示されるまで loading 表示をしたい
     html! {
         <>
+            <p>
+                <img style="display: inline-block; width: 1.2em; height: 1.2em; vertical-align: middle;" src="public/icon-success.svg" alt="success" />
+                {"QR code was generated."}
+            </p>
             <img src={img} alt={&url} />
         </>
     }