From d1d057cc8479e5cb81a1fb7cf9a838fce210cc2c Mon Sep 17 00:00:00 2001
From: yudejp <i@yude.jp>
Date: Sun, 30 May 2021 10:44:57 +0900
Subject: [PATCH] Make widget for WakaTime

---
 pages/components/WakaTime.js | 52 ++++++++++++++++++++++++++++++++++++
 pages/profile.js             |  7 +++--
 2 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 pages/components/WakaTime.js

diff --git a/pages/components/WakaTime.js b/pages/components/WakaTime.js
new file mode 100644
index 0000000..5f62c04
--- /dev/null
+++ b/pages/components/WakaTime.js
@@ -0,0 +1,52 @@
+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 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={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 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>
+          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
+        </>
+      ) : null}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/pages/profile.js b/pages/profile.js
index 19cb1a9..50f07e5 100644
--- a/pages/profile.js
+++ b/pages/profile.js
@@ -1,7 +1,7 @@
 import Layout from "./components/Layout"
 import useTranslation from 'next-translate/useTranslation'
 import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam } from '@fortawesome/free-brands-svg-icons'
-import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo, faKey, faDownload, faEye, faUserClock } from '@fortawesome/free-solid-svg-icons'
+import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo, faKey, faDownload, faEye } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import Image from 'next/image'
@@ -9,6 +9,7 @@ import DiscordStatus from './components/DiscordStatus'
 import { useRouter } from 'next/router'
 import DiscordPlaying from './components/DiscordPlaying'
 import Spotify from './components/Spotify'
+import WakaTime from './components/WakaTime'
 
 export default function About(props) {
   const router = useRouter()
@@ -202,9 +203,7 @@ export default function About(props) {
          // WakaTime
         }
         <div className="text-left my-6">
-        <p className="text-2xl"><FontAwesomeIcon icon={faUserClock} className="w-5 h-5 inline"/> WakaTime</p>
-        <figure className="max-w-2xl"><embed src="https://wakatime.com/share/@yude/6f15075a-b9d5-464a-8b4f-545d31933dfb.svg"></embed></figure>
-        <figure className="max-w-2xl"><embed src="https://wakatime.com/share/@yude/a8c52934-488b-4bdd-aed1-4f3fc73eb78e.svg"></embed></figure>
+        <WakaTime />
         </div>
         <div>
         </div>