yude
/
yude.jp
mirror of https://github.com/yude-jp/yude.jp
0
0
Fork 0
Code Releases Activity

Make widget for WakaTime

This commit is contained in:
yude 2021-05-30 10:44:57 +09:00
parent 3ff7368f06
commit d1d057cc84
Signed by: yude
GPG Key ID: EB0FE5D925C4A968
2 changed files with 55 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
pages/components/WakaTime.js Normal file
View File

@ -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}
</>
);
}

7
pages/profile.js
View File

@ -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>