v2 about (#362)

* chore: remove unused assets * feat: about ontime * refactor: cleanup unused
2026-08-21 15:09:10 +00:00 · 2023-04-25 22:31:56 +02:00
parent 8f834fed35
commit 0b94fc71a4
39 changed files with 307 additions and 112 deletions
@@ -0,0 +1,68 @@
+import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay } from '@chakra-ui/react';
+
+import { ReactComponent as OntimeLogo } from '@/assets/images/ontime-logo.svg';
+
+import { version } from '../../../../package.json';
+import { gitbookUrl, githubUrl } from '../../../externals';
+import ModalLink from '../ModalLink';
+
+import UpdateChecker from './UpdateChecker';
+
+import styles from '../Modal.module.scss';
+
+interface AboutModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function AboutModal(props: AboutModalProps) {
+  const { isOpen, onClose } = props;
+
+  return (
+    <Modal
+      size='sm'
+      isOpen={isOpen}
+      onClose={onClose}
+      closeOnOverlayClick={false}
+      motionPreset='slideInBottom'
+      scrollBehavior='inside'
+      preserveScrollBarGap
+      variant='ontime-small'
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          About Ontime
+          <ModalCloseButton />
+        </ModalHeader>
+
+        <ModalBody className={styles.body}>
+          <div className={styles.twoColumn}>
+            <OntimeLogo className={styles.logo} />
+            <div>
+              <div className={styles.padBottom}>
+                <span className={styles.sectionTitle}>Ontime</span>
+                Free Open Source Software for managing rundowns and event timers
+                <ModalLink href='www.getontime.no'>www.getontime.no</ModalLink>
+              </div>
+              <div className={styles.padBottom}>
+                <span className={styles.sectionTitle}>Current version</span>
+
+                {`You are currently using Ontime ${version}`}
+              </div>
+              <div className={styles.padBottom}>
+                <span className={styles.sectionTitle}>Docs</span>
+                <ModalLink href={gitbookUrl}>Read the docs over at GitBook</ModalLink>
+              </div>
+              <div>
+                <span className={styles.sectionTitle}>Github</span>
+                <ModalLink href={githubUrl}>Follow the project on GitHub</ModalLink>
+              </div>
+              <UpdateChecker version={version} />
+            </div>
+          </div>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}