Add margin-top on Dynmap button

locales/en/minecraft.json

@@ -4,5 +4,7 @@
     "no_one": "No one is playing.",
     "offline": "Server is down.",
     "address": "Server address",
-    "fail": "Failed to retrieve server status."
+    "fail": "Failed to retrieve server status.",
+    "loading": "Retrieving server status...",
+    "version": "Version"
 }

locales/ja/minecraft.json

@@ -4,5 +4,7 @@
     "no_one": "現在、誰もログインしていません。",
     "offline": "サーバーがオフラインのようです。",
     "address": "サーバー アドレス",
-    "fail": "サーバーの状態を取得できませんでした。"
+    "fail": "サーバーの状態を取得できませんでした。",
+    "loading": "サーバーの状態を取得しています...",
+    "version": "バージョン"
 }

pages/components/Minecraft.js

@@ -31,16 +31,19 @@ export default function Minecraft(props) {
         const playing = t('minecraft:playing', {count: player})
         const no_one = t('minecraft:no_one')
         const offline = t('minecraft:offline')
+        const loading = t('minecraft:loading')
         return (
           <p className="text-center">
             {(() => {
-            if (status) {
+            if (status == true) {
             if (player == undefined || player == 0) {
               return <span>{no_one}</span>
             } else {
               return <span>{playing}</span>
-            }}else{
+            }}else if (status == false) {
               return <span>{offline}</span>
+            }else {
+              return <span>{loading}</span>
             }
           })()}
           </p>

pages/minecraft.js

@@ -4,7 +4,7 @@ import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
 import Minecraft from './components/Minecraft'
 import Image from 'next/image'
-import { faMap } from '@fortawesome/free-solid-svg-icons'
+import { faMap, faCopy } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 
@@ -14,6 +14,11 @@ export default function About(props) {
     const { t, lang } = useTranslation("minecraft")
     const title = t('title')
     const address = t('address')
+    const version = t('version')
+    const copyText = () => {
+      navigator.clipboard.writeText("yude.jp");
+    };
+
     return (
             <Layout title={title}>
             <div>
@@ -29,11 +34,21 @@ export default function About(props) {
                 </div>
                 <div className="text-center">
                 <Minecraft />
-                <p>{address}: <code>yude.jp</code></p>
+                <p>
+                  <span>{address}: <code>yude.jp</code></span>
+                  <button
+                    className="bg-pink-600 text-white active:bg-pink-600 font-bold text-sm px-2 py-2 ml-2 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"
+                    type="button"
+                    onClick={() => copyText()}
+                  >
+                    <FontAwesomeIcon icon={faCopy} className="w-5 h-5 inline"/>
+                  </button>
+                </p>
+                <p>{version}: 1.16.x</p>
                 <Link href="https://dynmap.yude.jp">
                 <a>
                 <button
-                className="bg-pink-600 text-white active:bg-pink-600 font-bold text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"
+                className="bg-pink-600 text-white active:bg-pink-600 mt-3 font-bold text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"
                 type="button"
               >
                 <FontAwesomeIcon icon={faMap} className="w-5 h-5 inline"/> Dynmap