From e3784beb9ac8e6fe6457882b5c14b55cafa588a7 Mon Sep 17 00:00:00 2001
From: yude <i@yude.jp>
Date: Tue, 5 Mar 2024 09:37:48 +0900
Subject: [PATCH] Disable button if name or body is empty

---
 src/components/Chat.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index d4c622b..1eea873 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -94,7 +94,12 @@ export default function Chat() {
                     <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">本文</label>
                     <input type="text" id="body" className="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-blue-500 dark:focus:border-blue-500" value={body} onChange={updateBody} />
                 </div>
-                <button onClick={submit} type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                <button
+                    onClick={submit}
+                    type="button"
+                    className={`text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800${ name === "" || body === "" ? " opacity-20" : ""}`}
+                    disabled={name === "" || body === ""}
+                >
                     <FontAwesomeIcon icon={faPaperPlane} />{" "}送信
                 </button>
             </div>