Folder organizing, Modularize profile items

pages/components/Profile/Button.js

@@ -0,0 +1,23 @@
+// Next.js
+import Link from 'next/link'
+
+// Font Awesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const Button = (props) => {
+    const { icon, dest, caption } = props
+    return (
+        <Link href={`${dest}`}>
+            <a>
+                <button
+                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={icon} className="w-5 h-5 inline"/> {caption}
+                </button>
+            </a>
+        </Link>
+    )
+}
+
+export default Button

pages/components/Profile/Contact.js

@@ -0,0 +1,21 @@
+// Next.js
+import Link from 'next/link'
+
+// Font Awesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const Contact = (props) => {
+    const { icon, dest, caption } = props
+    return (
+        <div className="hover:underline">
+            <Link href={`${dest}`}>
+                <a>
+                    <FontAwesomeIcon icon={icon} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
+                    <p className="font-mono text-xl">{caption}</p>
+                </a>
+            </Link>
+        </div>
+    )
+}
+
+export default Contact

pages/components/Profile/NintendoSW.js

@@ -0,0 +1,35 @@
+// Next.js
+import Link from 'next/link'
+
+const NintendoSW = () => {
+    return (
+        <div className="hover:underline">
+            <Link href="#">
+                <a>
+                    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" className="w-12 h-12 inline lg:w-12 lg:h-12 md:w-12 md:h-12 fill-current text-black dark:text-white" viewBox="0 0 700 700">
+                        <g transform="translate(-100.000000,900.000000) scale(0.100000,-0.100000)" fill="#FFFFF">
+                        <path d="M2965 8314 c-481 -86 -868 -442 -990 -910 -44 -169 -47 -268 -42
+                        -1579 3 -1204 4 -1232 24 -1325 111 -501 467 -858 973 -976 66 -15 150 -18
+                        691 -21 560 -4 618 -3 633 12 15 15 16 208 16 2396 0 1622 -3 2386 -10 2400
+                        -10 18 -27 19 -613 18 -476 -1 -619 -4 -682 -15z m905 -2400 l0 -2026 -407 5
+                        c-375 4 -415 6 -490 25 -322 83 -561 331 -628 654 -22 101 -22 2589 -1 2688
+                        60 281 255 514 518 619 132 53 193 59 621 60 l387 1 0 -2026z"/>
+                        <path d="M3051 7329 c-63 -12 -159 -60 -210 -105 -105 -91 -157 -220 -149
+                        -372 4 -79 9 -100 41 -164 47 -97 118 -168 215 -216 67 -33 84 -37 171 -40 79
+                        -3 107 0 160 18 217 73 348 284 311 500 -43 257 -287 429 -539 379z"/>
+                        <path d="M4757 8323 c-4 -3 -7 -1087 -7 -2409 0 -2181 1 -2402 16 -2408 27
+                        -10 803 -6 899 4 406 46 764 293 959 660 25 47 58 126 75 175 63 188 61 138
+                        61 1575 0 1147 -2 1318 -16 1391 -99 521 -496 914 -1018 1004 -70 12 -178 15
+                        -526 15 -240 0 -440 -3 -443 -7z m1068 -2178 c156 -41 284 -160 336 -312 33
+                        -94 32 -232 -1 -318 -61 -158 -181 -269 -335 -310 -250 -65 -516 86 -589 334
+                        -22 76 -21 204 4 282 75 245 335 389 585 324z"/>
+                        </g>
+                    </svg>
+                    <p className="font-mono text-xl">SW-5543-5143-8814</p>
+                </a>
+            </Link>
+        </div>
+    )
+}
+
+export default NintendoSW

pages/components/Profile/PublicKeys.js

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import useTranslation from 'next-translate/useTranslation'
+import { faKey, faEye, faDownload } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+
+export default function Modal() {
+  const [showModal, setShowModal] = React.useState(false);
+  const router = useRouter()
+  const { t, lang } = useTranslation("common")
+  const { locale, locales, defaultLocale, pathname } = router
+  const close = t('common:close')
+  const keys = t('profile:keys')
+  const view = t('profile:view')
+  const fingerprint = t('profile:fingerprint')
+  const download = t('profile:download')
+
+  return (
+    <>
+      <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"
+        onClick={() => setShowModal(true)}
+      >
+        <FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}
+      </button>
+      {showModal ? (
+        <>
+          <div
+            className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
+          >
+            <div className="relative mx-auto w-4/5 max-h-1/2 -mt-96 max-w-3xl">
+              {/* Modal content */}
+              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+                {/* Modal body */}
+                <div className="relative p-2 flex-auto text-black text-left">
+                
+                <p className="text-2xl"><FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}</p>
+          <ul className="list-disc my-2">
+          <li>
+            <span className="font-bold">PGP&nbsp;</span>
+            <Link href="/yudejp.gpg">
+              <a className="hover:underline">
+                <FontAwesomeIcon icon={faDownload} className="w-5 h-5 inline"/>&nbsp;
+                {download}
+              </a>
+            </Link>
+            <p>{fingerprint}:</p>
+            <div className="overflow-x-auto">
+              <div className="whitespace-nowrap">
+                <code>3745 F270 DB4E 8975 6B07  62BE EB0F E5D9 25C4 A968</code>
+              </div>
+            </div>
+          </li>
+          <li>
+            <span className="font-bold">SSH&nbsp;</span>
+            <Link href="https://github.com/yude.keys">
+              <a className="hover:underline">
+                <FontAwesomeIcon icon={faEye} className="w-5 h-5 inline"/>&nbsp;
+                {view}
+              </a>
+            </Link>
+            <p>{fingerprint}:</p>
+            <div className="overflow-x-auto">
+              <div className="whitespace-nowrap">
+              <code>2048 SHA256:xwSL4DORWmroWdC6P0GU1m1yZl/cXqjo9rCCWqqO+Dc</code>
+              </div>
+            </div>
+          </li>
+            </ul>
+                
+                </div>
+                {/* Modal footer for close button */}
+                <div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
+                  <button
+                    className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                    type="button"
+                    onClick={() => setShowModal(false)}
+                  >
+                    {close}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+}

pages/components/Profile/Spotify.js

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+
+function App () {
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+  const { t, lang } = useTranslation("common")  
+  const [data, setData] = useState({ hits: [] });
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        '/api/Spotify',
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
+    console.log("[Spotify Web API] データの取得に失敗しました。 / Failed to retrieve data.")
+    return <p></p>
+  }else{
+  if (data.isPlaying){
+   const status = data.artist + ' / ' + data.title
+   return <p>{t('listening', {listening: status})}</p>
+  }else{
+   return <p></p>
+  }
+};
+}
+
+export default App;

pages/components/Profile/WakaTime.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import useTranslation from 'next-translate/useTranslation'
+import { faUserClock } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useRouter } from 'next/router'
+
+export default function Modal() {
+  const [showModal, setShowModal] = React.useState(false);
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+  const { t, lang } = useTranslation("common")
+  const close = t('common:close')
+  return (
+    <>
+      <button
+        className="bg-pink-600 text-white active:bg-pink-600 font-bold text-sm px-6 py-3 rounded hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+        type="button"
+        onClick={() => setShowModal(true)}
+      >
+        <FontAwesomeIcon icon={faUserClock} className="w-5 h-5 inline"/> WakaTime
+      </button>
+      {showModal ? (
+        <>
+          <div
+            className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
+          >
+            <div className="relative mx-auto w-4/5 max-h-1/2 -mt-96 max-w-3xl">
+              {/* Modal content */}
+              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+                {/* Modal body */}
+                <div className="relative p-2 flex-auto">
+                <figure><embed src="https://wakatime.com/share/@yude/6f15075a-b9d5-464a-8b4f-545d31933dfb.svg"></embed></figure>
+                </div>
+                {/* Modal footer for close button */}
+                <div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
+                  <button
+                    className="text-red-500 font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                    type="button"
+                    onClick={() => setShowModal(false)}
+                  >
+                    {close}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+}