add footer and build info

src/app/layout.tsx

@@ -10,6 +10,7 @@ import { ThemeProvider } from "@/components/providers/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import "./globals.css";
+import Footer from "@/components/footer";
 
 const siteFont = localFont({
   src: "./fonts/JetBrainsMono-Regular.woff2",
@@ -78,9 +79,12 @@ export default function RootLayout({
             >
               <QueryProvider>
                 <AnimatePresence>
-                  <main className="z-[9999] m-auto flex h-screen flex-col items-center md:max-w-[1200px]">
+                  <main className="flex flex-col min-h-screen gap-2">
                     <NavBar />
-                    {children}
+                    <div className="z-[1] m-auto flex flex-col flex-grow items-center md:max-w-[1200px]">
+                      {children}
+                    </div>
+                    <Footer />
                   </main>
                 </AnimatePresence>
               </QueryProvider>

src/common/website-utils.ts

@@ -6,3 +6,26 @@
 export function setPlayerIdCookie(playerId: string) {
   document.cookie = `playerId=${playerId}`;
 }
+
+/**
+ * Gets if we're in production
+ */
+export function isProduction() {
+  return process.env.NODE_ENV === "production";
+}
+
+/**
+ * Gets the build information
+ *
+ * @returns the build information
+ */
+export function getBuildInformation() {
+  const buildId = process.env.NEXT_PUBLIC_BUILD_ID
+    ? isProduction()
+      ? process.env.NEXT_PUBLIC_BUILD_ID.slice(0, 7)
+      : "dev"
+    : "";
+  const buildTime = process.env.NEXT_PUBLIC_BUILD_TIME;
+
+  return { buildId, buildTime };
+}

src/components/footer.tsx

@@ -0,0 +1,40 @@
+import NavbarButton from "@/components/navbar/navbar-button";
+import Link from "next/link";
+import { getBuildInformation } from "@/common/website-utils";
+
+type NavbarItem = {
+  name: string;
+  link: string;
+};
+
+const items: NavbarItem[] = [
+  {
+    name: "Home",
+    link: "/",
+  },
+  {
+    name: "Source",
+    link: "https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3",
+  },
+];
+
+export default function Footer() {
+  const { buildId, buildTime } = getBuildInformation();
+
+  return (
+    <div className="flex items-center w-full flex-col gap-1">
+      <p className="text-input text-sm">
+        Build: {buildId} ({buildTime})
+      </p>
+      <div className="h-14 w-full flex items-center justify-center bg-secondary/95 divide-x divide-input">
+        {items.map((item, index) => {
+          return (
+            <Link className="px-2 text-pp hover:brightness-75" href={item.link}>
+              {item.name}
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/navbar/navbar.tsx

@@ -34,8 +34,8 @@ const renderNavbarItem = (item: NavbarItem) => (
 
 export default function Navbar() {
   return (
-    <div className="w-full py-2">
-      <div className="h-10 rounded-md items-center flex justify-between bg-secondary/90">
+    <div className="w-full sticky top-0 z-[999]">
+      <div className="h-10 items-center flex justify-between bg-secondary/95">
         {/* Left-aligned items */}
         <div className="flex items-center h-full">
           <ProfileButton />