✨ Implement footer

.env

@@ -0,0 +1,2 @@
+REACT_APP_VERSION=$npm_package_version
+REACT_APP_NAME=$npm_package_name

src/App.js

@@ -1,5 +1,5 @@
 import React from "react";
-import {Bluelib, Main} from "bluelib/lib/components";
+import {Bluelib} from "bluelib/lib/components";
 import {Router} from "@reach/router";
 import Home from "./routes/Home";
 import Error404 from "./routes/Error404";

src/components/Footer.js

@@ -0,0 +1,20 @@
+import style from './Footer.module.css';
+import {Anchor, Title} from "bluelib/lib/components";
+
+export default function Footer() {
+    return (
+        <div className={style.footer}>
+            <Title size={"xs"}>
+                © {new Date().getFullYear().toString()}
+                &nbsp;-&nbsp;
+                <Anchor href="https://steffo.eu/">Stefano Pigozzi</Anchor>
+                &nbsp;-&nbsp;
+                <Anchor href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</Anchor>
+                &nbsp;-&nbsp;
+                <Anchor href="https://github.com/Steffo99/uni.steffo.eu">{process.env.REACT_APP_NAME} {process.env.REACT_APP_VERSION} ({process.env.NODE_ENV})</Anchor>
+                &nbsp;-&nbsp;
+                <Anchor href="https://ko-fi.com/steffo">Supportami</Anchor>
+            </Title>
+        </div>
+    );
+}

src/components/Footer.module.css

@@ -0,0 +1,5 @@
+.footer {
+    margin-top: 8px;
+    text-align: center;
+    font-size: x-small;
+}

src/components/Page.js

@@ -2,6 +2,7 @@ import React from "react";
 import {Main} from "bluelib/lib/components";
 import MainTitle from "./MainTitle";
 import PropTypes from "prop-types";
+import Footer from "./Footer";
 
 
 export default function Page({children, subtitle}) {
@@ -11,6 +12,7 @@ export default function Page({children, subtitle}) {
             <Main>
                 {children}
             </Main>
+            <Footer/>
         </div>
     )
 }

src/components/TitleSplit.js

@@ -1,12 +1,11 @@
 import React from "react";
 import {Split, Title} from "bluelib/lib/components";
 import PropTypes from "prop-types";
-import style from "./TitleSplit.module.css";
 
 
-export default function TitleSplit({children, title}) {
+export default function TitleSplit({children, className, title}) {
     return (
-        <div className={style.titlesplit}>
+        <div className={className}>
             <Title size={"xl"}>
                 {title}
             </Title>
@@ -19,5 +18,6 @@ export default function TitleSplit({children, title}) {
 
 TitleSplit.propTypes = {
     children: PropTypes.node,
+    className: PropTypes.string,
     title: PropTypes.node
 }

src/components/TitleSplit.module.css

@@ -1,3 +0,0 @@
-.titlesplit {
-    margin-top: 32px;
-}