feat(frontend): add footer with version number

frontend/src/components/Footer.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+const REPO_URL = "https://github.com/apricote/Listory";
+const CHANGELOG_URL = `${REPO_URL}/blob/master/CHANGELOG.md`;
+
+const VERSION = process.env.REACT_APP_VERSION || "Unknown";
+
+export const Footer: React.FC = () => {
+  return (
+    <div className="flex items-center justify-between flex-wrap bg-green-500 p-4 text-green-200 hover:text-white text-xs">
+      <div>
+        <a
+          href={CHANGELOG_URL}
+          target="_blank"
+          rel="noreferrer"
+          title="Listory Changelog"
+        >
+          v{VERSION}
+        </a>{" "}
+      </div>
+      <div>
+        <a
+          href={REPO_URL}
+          target="_blank"
+          rel="noreferrer"
+          title="Listory GitHub Repository"
+        >
+          Check out on GitHub
+        </a>
+      </div>
+    </div>
+  );
+};

frontend/src/components/NavBar.tsx

@@ -8,11 +8,11 @@ export const NavBar: React.FC = () => {
   const { user, loginWithSpotifyProps } = useAuth();
 
   return (
-    <nav className="flex items-center justify-between flex-wrap bg-green-500 p-6">
+    <div className="flex items-center justify-between flex-wrap bg-green-500 p-6">
       <div className="flex items-center flex-shrink-0 text-white mr-6">
         <span className="font-semibold text-xl tracking-tight">Listory</span>
       </div>
-      <div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto ">
+      <nav className="w-full block flex-grow lg:flex lg:items-center lg:w-auto ">
         <div className="text-sm lg:flex-grow">
           {user && (
             <>
@@ -48,8 +48,8 @@ export const NavBar: React.FC = () => {
           )}
           {user && <NavUserInfo user={user} />}
         </div>
-      </div>
-    </nav>
+      </nav>
+    </div>
   );
 };
 

frontend/src/components/NavItem.tsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export const NavItem: React.FC = ({ children }) => {
-  return <li>{children}</li>;
-};