diff --git a/components/github-badge.js b/components/github-badge.js index e60311c..332cef4 100644 --- a/components/github-badge.js +++ b/components/github-badge.js @@ -1,38 +1,25 @@ const GithubBadge = () => { - const quickStyles = { - position: 'fixed', - right: '4px', - top: '4px', - zIndex: '2', - background: 'white', - borderRadius: '5px', - padding: '2px', - opacity: '.333', - } - return ( - <div style={quickStyles}> - <a - href="https://github.com/LogicHappens/musical-conquest" - target="_blank" - rel="noreferrer" - style={{ display: 'flex' }} + <a + href="https://github.com/LogicHappens/musical-conquest" + target="_blank" + rel="noreferrer" + style={{ display: 'flex' }} + > + <svg + height="32" + aria-hidden="true" + viewBox="0 0 16 16" + version="1.1" + width="32" + data-view-component="true" > - <svg - height="32" - aria-hidden="true" - viewBox="0 0 16 16" - version="1.1" - width="32" - data-view-component="true" - > - <path - fillRule="evenodd" - d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" - ></path> - </svg> - </a> - </div> + <path + fillRule="evenodd" + d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" + ></path> + </svg> + </a> ) } diff --git a/components/version.js b/components/version.js new file mode 100644 index 0000000..2e17185 --- /dev/null +++ b/components/version.js @@ -0,0 +1,14 @@ +import packageInfo from '../package.json' +const { version } = packageInfo + +const Version = () => ( + <a + href="https://github.com/LogicHappens/musical-conquest/releases" + target="_blank" + rel="noreferrer" + > + v{version} + </a> +) + +export default Version diff --git a/package.json b/package.json index b717f8f..35df029 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "musical-conquest", - "version": "0.1.0", + "version": "1.0.3", "private": true, "scripts": { "dev": "next dev", @@ -42,6 +42,6 @@ "eslint --cache --fix", "jest --bail --findRelatedTests" ], - "*.{js,css,sass,scss,md,json}": "prettier --write" + "*.{js,css,scss,md,json}": "prettier --write" } } diff --git a/pages/index.js b/pages/index.js index 43c56ba..e02b9c8 100644 --- a/pages/index.js +++ b/pages/index.js @@ -9,6 +9,7 @@ import { useRouter } from 'next/router' import { Context } from '../components/helpers/context' import { getRandomInt } from '@/lib/random' import GithubBadge from '@/components/github-badge' +import Version from '@/components/version' export default function Home() { const { setAudio, currentSongHash, currentSong } = useContext(Context) @@ -72,7 +73,10 @@ export default function Home() { <link rel="icon" href="/favicon.ico" /> </Head> - <GithubBadge /> + <div className={styles.infos}> + <GithubBadge /> + <Version /> + </div> {randomImage && ( <img diff --git a/styles/Home.module.sass b/styles/Home.module.sass index eea00fa..ba7099b 100644 --- a/styles/Home.module.sass +++ b/styles/Home.module.sass @@ -51,3 +51,21 @@ width: 100vw height: 100vh object-fit: cover + +.infos + position: fixed + right: 4px + top: 4px + z-index: 2 + display: flex + flex-direction: column + align-items: flex-end + gap: 4px + &>* + border-radius: 5px + padding: 4px + background: white + opacity: 0.333 + width: fit-content + &:hover + opacity: 1