Add page "minecraft/"

pages/components/Minecraft.js

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+import axios from 'axios';
+
+export default function Minecraft(props) {
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+  const { t, lang } = useTranslation("minecraft")
+
+  const [dataMinecraft, setDataMinecraft] = useState({ hits: [] });
+  const [data, setData] = useState({ hits: [] });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://mcapi.us/server/status?ip=yude.jp',
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+
+    if (data === undefined){
+        console.log("[Minecraft Query] データの取得に失敗しました。 / Failed to retrieve data.")
+        console.log(data)
+        return (
+        <p>Failed to retrieve data</p>
+        )
+      }else{
+        console.log(data)
+        const player = data.players && data.players.now
+        const playing = t('minecraft:playing', {count: player})
+        const no_one = t('minecraft:no_one')
+        return (
+          <p className="text-center">
+            {(() => {
+            if (player == 0) {
+              return <span>{no_one}</span>
+            } else {
+              return <span>{playing}</span>
+            }
+          })()}
+          </p>
+        )
+      }
+}

pages/minecraft.js

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import Layout from "./components/Layout"
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+import Minecraft from './components/Minecraft'
+import Image from 'next/image'
+
+export default function About(props) {
+    const router = useRouter()
+    const { locale, locales, defaultLocale, pathname } = router
+    const { t, lang } = useTranslation("minecraft")
+    const title = t('title')
+
+    return (
+        <Layout title={title}>
+        <div>
+        <p className="my-2 text-3xl text-center">{title}</p>
+        <div className="w-full">
+        <Image
+            src         = "/static/images/dynmap.png"
+            alt         = "Dynmap Header"
+            unoptimized = {true}
+            width       = {1354}
+            height      = {619}
+        />
+        </div>
+        <Minecraft />
+        </div>
+        </Layout>
+        )
+}