feat: version and github link in settings (#67)

* feat: version and github link in settings

* Update to 1.1.0 (minor)

CHANGELOG.md

@@ -7,7 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-## 1.0.0
+## [v1.1.0](https://github.com/slavikdenis/vape-timer/compare/v1.0.0...v1.1.0)
+
+### Merged
+
+- feat: auto changelog / CI previous job cancellation / deps update [`#66`](https://github.com/slavikdenis/vape-timer/pull/66)
+
+### Commits
+
+- feat: version and github link in settings [`d374c51`](https://github.com/slavikdenis/vape-timer/commit/d374c513d6b98ea5bcd5d4cac0e5f427772bc801)
+
+## v1.0.0 - 2023-06-18
 
 ### Merged
 
@@ -82,6 +92,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Updated dependencies [`8a4955d`](https://github.com/slavikdenis/vape-timer/commit/8a4955d5e3101124d5be00d995c423e211054a65)
 - Use settings on timer [`c24ba70`](https://github.com/slavikdenis/vape-timer/commit/c24ba702be874b05ff691a52f0c8a7da2df50b86)
 - Update deps [`e8c779f`](https://github.com/slavikdenis/vape-timer/commit/e8c779f7c93e72414549cf7d1fea46792dcafb3b)
+- Update to 1.0.0 (major) [`e055fd2`](https://github.com/slavikdenis/vape-timer/commit/e055fd26b112f75601888ede5dbbb7deb1e48121)
 - Use timer context [`fa54aa9`](https://github.com/slavikdenis/vape-timer/commit/fa54aa961bc9d6dc045e1736d3806e9a2790b59d)
 - Added screen wake lock API [`d8d2205`](https://github.com/slavikdenis/vape-timer/commit/d8d22053b7955723b931b562b50e5160133c47c6)
 - Create timer context [`be51659`](https://github.com/slavikdenis/vape-timer/commit/be516592c5c90633e76f80bc85831113415e7905)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vape-timer",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "scripts": {
     "dev": "next",
     "build": "next build",

src/components/icons/GithubIcon.tsx

@@ -0,0 +1,11 @@
+import { memo, SVGProps } from 'react';
+
+function GithubIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 30 30" width="30px" height="30px" {...props}>
+      <path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z" />
+    </svg>
+  );
+}
+
+export default memo(GithubIcon);

src/components/settings/index.tsx

@@ -1,4 +1,6 @@
 import {
+  Box,
+  Divider,
   Drawer,
   DrawerBody,
   DrawerCloseButton,
@@ -7,15 +9,19 @@ import {
   DrawerHeader,
   DrawerOverlay,
   DrawerProps,
+  Link,
+  Text,
   useDisclosure,
 } from '@chakra-ui/react';
 import { css } from '@emotion/react';
-import { memo } from 'react';
+import { memo, useRef } from 'react';
 import { useSettingsContext } from '../../context/settings';
 import { useTimerContext } from '../../context/timer';
 import Button from '../Button';
 import SettingsAlert from './SettingsAlert';
 import Content from './SettingsContent';
+import { getCurrentVersion } from '../../utils/utils';
+import GithubIcon from '../icons/GithubIcon';
 
 type SettingsDrawerProps = Pick<
   DrawerProps,
@@ -27,6 +33,8 @@ const SettingsDrawer = ({
   onClose,
   finalFocusRef,
 }: SettingsDrawerProps) => {
+  const packageVersion = useRef(getCurrentVersion()).current;
+
   // Alert dialog
   const {
     isOpen: isAlertShown,
@@ -95,7 +103,7 @@ const SettingsDrawer = ({
           </DrawerBody>
 
           {!areTimerSettingsDefault && (
-            <DrawerFooter>
+            <DrawerFooter flexDirection="column">
               <Button
                 minimal
                 fullWidth
@@ -107,6 +115,27 @@ const SettingsDrawer = ({
               </Button>
             </DrawerFooter>
           )}
+
+          <Divider marginY={2} />
+
+          <Box
+            width="100%"
+            paddingBottom={2}
+            paddingX={6}
+            display="flex"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Text fontSize="xs">Version: {packageVersion}</Text>
+
+            <Link
+              href="https://github.com/slavikdenis/vape-timer"
+              target="_blank"
+            >
+              <GithubIcon width={30} height={30} fill="#FFFFFF" />
+            </Link>
+          </Box>
         </DrawerContent>
       </DrawerOverlay>
     </Drawer>

src/utils/utils.ts

@@ -1,2 +1,7 @@
+import packageJson from '../../package.json';
+
 export const isNumber = (val: unknown): val is number =>
   typeof val === 'number';
+
+// Read version from `package.json
+export const getCurrentVersion = (): string => packageJson.version;