Add footer

public/locales/de/translation.json

@@ -29,6 +29,7 @@
     },
     "system": {
         "notfound": "Seite nicht gefunden",
-        "language": "Sprache"
+        "language": "Sprache",
+        "imprint": "Impressum"
     }
 }

public/locales/en/translation.json

@@ -29,6 +29,7 @@
     },
     "system": {
         "notfound": "Page Not Found",
-        "language": "Language"
+        "language": "Language",
+        "imprint": "Imprint"
     }
 }

src/App.js

@@ -9,12 +9,14 @@ import Navigation from "./components/Navigation";
 import * as styles from "./App.module.scss";
 import NotFoundPage from "./pages/NotFound";
 import ToolLoader from "./tools/ToolLoader";
+import { Trans } from "react-i18next";
 
 const HomePage = lazy(() => import('./pages/Home'));
 const ToolsPage = lazy(() => import('./pages/Tools'));
 const AboutPage = lazy(() => import('./pages/About'));
 
 function App() {
+
   return (
     <Suspense fallback="Kevin's Data-Toolbox is loading...">
       <Router>
@@ -30,6 +32,7 @@ function App() {
             </Switch>
           </Suspense>
         </div>
+        <footer className={styles.footer}>CC-BY-4.0 Kevin Kandlbinder | <a href="//kevink.dev/legal/about">Impressum</a></footer>
       </Router>
     </Suspense>
   );

src/App.module.scss

@@ -10,4 +10,11 @@
     > * {
         flex-shrink: 0;
     }
+}
+
+.footer {
+    background-color: #1c1c1c;
+    color: white;
+    text-align: center;
+    padding: 5px;
 }