yude.jp/pages/status.js

import Layout from "./components/Layout"
import useTranslation from 'next-translate/useTranslation'

import { useRouter } from 'next/router'

export default function About(props) {
  const router = useRouter()
  const { locale, locales, defaultLocale, pathname } = router
  const { t, lang } = useTranslation("status")
  const status = t('status')
  const location = t('location')
  const tottori = t('tottori')
  const hiroshima = t('hiroshima')
  const model = t('model')
  const service = t('service')
  const region = t('region')
  const shape = t('shape')

  return (

    <Layout title={status}>
        <div className="my-9 text-center">
        {
         // Heading
        }
        <div className="mb-5">
          <p className="text-left text-4xl">{status} <p className="md:inline font-mono text-base sm:">Powered / Generated by Mackerel.</p></p>
        </div>
        {
            // cherry Mackerel
        }
        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">yui</h2>
        <div className="flex xl:w-2/3 text-center">
        <div className="flex-1"><p className="font-bold">CPU </p>i7-2600</div>
        <div className="flex-1"><p className="font-bold">RAM </p>DDR3 24GB</div>
        <div className="flex-1"><p className="font-bold">OS </p>Arch Linux</div>
        <div className="flex-1"><p className="font-bold">{location} </p>{hiroshima}</div>
        </div>
        <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/heHnGhDanoIDlf7jjxUe9yPVrsG3deeH5ptD8suErrq5w46crWEIYdLfzLoukzfF?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
        
        {
            // raspberry Mackerel
        }
        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">yukino</h2>
        <div className="flex xl:w-2/3 text-center">
        <div className="flex-1"><p className="font-bold">{model} </p>Raspberry Pi 4 Model B Rev 1.2</div>
        <div className="flex-1"><p className="font-bold">RAM </p>4GB</div>
        <div className="flex-1"><p className="font-bold">OS </p>Raspbian GNU/Linux 10 (buster)</div>
        <div className="flex-1"><p className="font-bold">{location} </p>{tottori}</div>
        </div>
        <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/5HVbQiwuxrMithyrGjmmQCCOVgJ6Ptf94SDA2qWSTsh2rtz7pjePihYzaW5QEml4?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
        
        {
            // iroha Mackerel
        }
        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">iroha</h2>
        <div className="flex xl:w-2/3 text-center">
        <div className="flex-1"><p className="font-bold">{service} </p>Oracle Cloud</div>
        <div className="flex-1"><p className="font-bold">{shape} </p>VM.Standard.E2.1.Micro</div>
        <div className="flex-1"><p className="font-bold">RAM </p>1GB</div>
        <div className="flex-1"><p className="font-bold">OS </p>Ubuntu 20.04 LTS</div>
        <div className="flex-1"><p className="font-bold">{region} </p>Japan Central (Osaka)</div>
        </div>
        <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/wgmTz7aTgvwfyU6qVHrJJmQlpOHCUJK6qw0W9sJTX68WOI8TFtc27YvJ7dwkQEGv?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
        
        
        {
            // iroha Mackerel
        }
        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">komachi</h2>
        <div className="flex xl:w-2/3 text-center">
        <div className="flex-1"><p className="font-bold">{service} </p>Oracle Cloud</div>
        <div className="flex-1"><p className="font-bold">{shape} </p>VM.Standard.E2.1.Micro</div>
        <div className="flex-1"><p className="font-bold">RAM </p>1GB</div>
        <div className="flex-1"><p className="font-bold">OS </p>Ubuntu 20.04 LTS</div>
        <div className="flex-1"><p className="font-bold">{region} </p>Japan Central (Osaka)</div>
        </div>
        <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/vcn6LE4P2hh6GzvtMbIAWxsXpDh6eSoNyAXdhfYaj9yDN6FJwOHIiz9ktqToj1HG?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>

      </div>
    </Layout>
  )
}