Add button for Dynmap

pages/minecraft.js

@@ -4,6 +4,9 @@ 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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
 
 export default function About(props) {
     const router = useRouter()
@@ -24,8 +27,20 @@ export default function About(props) {
                     height      = {619}
                 />
                 </div>
+                <div className="text-center">
                 <Minecraft />
-        <p className="text-center">{address}: <code>yude.jp</code></p>
+                <p>{address}: <code>yude.jp</code></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"
+                type="button"
+              >
+                <FontAwesomeIcon icon={faMap} className="w-5 h-5 inline"/> Dynmap
+              </button>
+              </a>
+              </Link>
+              </div>
             </div>
             </Layout>
         )