chore: show app version in the footer

Author: rafgugi

.env

@@ -0,0 +1,3 @@
+REACT_APP_VERSION=$npm_package_version
+REACT_APP_NAME=$npm_package_name
+REACT_APP_REPO=$npm_package_repository

package-lock.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "bootstrap": "^5.2.3",
+    "bootstrap-icons": "^1.10.5",
     "file-saver": "^2.0.5",
     "gojs": "^2.3.6",
     "lodash": "^4.17.21",

package.json

@@ -17,6 +17,7 @@ import {
   unrichTreeData,
 } from '../family.util';
 import { useCache } from '../useCache';
+import Footer from './Footer';
 
 interface AppProps {
   trees: Person[];
@@ -209,6 +210,8 @@ function App(props: AppProps) {
         <Family trees={trees} />
       </Container>
 
+      <Footer />
+
       <ModalAddTree isOpen={showModalAddTree} toggle={toggleModalAddTree} />
       <ModalAddChild
         isOpen={showModalAddChild}

src/components/App.tsx

@@ -0,0 +1,18 @@
+import { Container } from 'reactstrap';
+
+const Footer = () => {
+  const repo_url = 'https://github.com/rafgugi/family-grid';
+  const version = process.env.REACT_APP_VERSION as string;
+
+  return (
+    <footer className="d-print-none bg-dark text-light py-3 mt-5">
+      <Container>
+        <a href={repo_url} className="text-light mr-3">
+          <i className="bi-github" /> family-grid {version}
+        </a>
+      </Container>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Footer.tsx

@@ -5,7 +5,8 @@ import { Person } from './family.interface';
 import { enrichTreeData } from './family.util';
 import rawFamilyData from './data.yml';
 
-import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap-icons/font/bootstrap-icons.min.css';
 
 let familyData = [] as Person[];
 if (typeof rawFamilyData === 'object') {