From 92c66b9bc797a7b9a835de28061336ded78ee86d Mon Sep 17 00:00:00 2001
From: Van Nguyen <36019388+nguyentvan7@users.noreply.github.com>
Date: Sun, 9 Mar 2025 13:11:30 -0700
Subject: [PATCH] SRO/ZO: Add footer to SR and ZZZ (#2833)

* Show commit hash in header for dev mode

* Revert "Show commit hash in header for dev mode"

This reverts commit 2083ab7eaa0a8ad8afef6825fbe7b43252df922d.

* Add footer to zzz and sr

* Update strings
---
 apps/sr-frontend/src/app/App.tsx     |  4 +++
 apps/sr-frontend/src/app/Footer.tsx  | 45 ++++++++++++++++++++++++++++
 apps/zzz-frontend/src/app/App.tsx    |  4 +++
 apps/zzz-frontend/src/app/Footer.tsx | 45 ++++++++++++++++++++++++++++
 4 files changed, 98 insertions(+)
 create mode 100644 apps/sr-frontend/src/app/Footer.tsx
 create mode 100644 apps/zzz-frontend/src/app/Footer.tsx

diff --git a/apps/sr-frontend/src/app/App.tsx b/apps/sr-frontend/src/app/App.tsx
index 7e495f7c2d..0aa32ce430 100644
--- a/apps/sr-frontend/src/app/App.tsx
+++ b/apps/sr-frontend/src/app/App.tsx
@@ -14,6 +14,7 @@ import {
 } from '@mui/material'
 import { Suspense, lazy } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
+import Footer from './Footer'
 import Header from './Header'
 import PageHome from './PageHome'
 
@@ -83,6 +84,9 @@ function Content() {
           </Routes>
         </Suspense>
       </Container>
+      {/* make sure footer is always at bottom */}
+      <Box flexGrow={1} />
+      <Footer />
     </Box>
   )
 }
diff --git a/apps/sr-frontend/src/app/Footer.tsx b/apps/sr-frontend/src/app/Footer.tsx
new file mode 100644
index 0000000000..70b83cbbbd
--- /dev/null
+++ b/apps/sr-frontend/src/app/Footer.tsx
@@ -0,0 +1,45 @@
+import { AppBar, Box, Skeleton, Typography } from '@mui/material'
+import { Suspense } from 'react'
+
+export default function Footer() {
+  return (
+    <Suspense fallback={<Skeleton variant="rectangular" height={64} />}>
+      <FooterContent />
+    </Suspense>
+  )
+}
+function FooterContent() {
+  return (
+    <AppBar
+      component="footer"
+      position="static"
+      sx={{ bgcolor: 'neutral800.main' }}
+      elevation={0}
+    >
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        sx={{ px: 2, py: 1 }}
+        gap={2}
+      >
+        <Typography variant="caption" sx={{ color: 'neutral400.main' }}>
+          Build:
+          <a
+            href={
+              process.env.NX_URL_GITHUB_GO_CURRENT_VERSION ||
+              `${process.env.NX_URL_GITHUB_GO}/releases`
+            }
+            target="_blank"
+            rel="noreferrer"
+            style={{ color: 'inherit' }}
+          >
+            {process.env.NX_URL_GITHUB_GO_CURRENT_VERSION?.replace(
+              /.*commit\//,
+              ''
+            ).substring(0, 7)}
+          </a>
+        </Typography>
+      </Box>
+    </AppBar>
+  )
+}
diff --git a/apps/zzz-frontend/src/app/App.tsx b/apps/zzz-frontend/src/app/App.tsx
index d93165b1a6..227dfd20d2 100644
--- a/apps/zzz-frontend/src/app/App.tsx
+++ b/apps/zzz-frontend/src/app/App.tsx
@@ -16,6 +16,7 @@ import {
 import { Suspense, lazy } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import '../styles.scss'
+import Footer from './Footer'
 import Header from './Header'
 const PageDiscs = lazy(() => import('@genshin-optimizer/zzz/page-discs'))
 const PageOptimize = lazy(() => import('@genshin-optimizer/zzz/page-optimize'))
@@ -78,6 +79,9 @@ function Content() {
           </Routes>
         </Suspense>
       </Container>
+      {/* make sure footer is always at bottom */}
+      <Box flexGrow={1} />
+      <Footer />
     </Box>
   )
 }
diff --git a/apps/zzz-frontend/src/app/Footer.tsx b/apps/zzz-frontend/src/app/Footer.tsx
new file mode 100644
index 0000000000..70b83cbbbd
--- /dev/null
+++ b/apps/zzz-frontend/src/app/Footer.tsx
@@ -0,0 +1,45 @@
+import { AppBar, Box, Skeleton, Typography } from '@mui/material'
+import { Suspense } from 'react'
+
+export default function Footer() {
+  return (
+    <Suspense fallback={<Skeleton variant="rectangular" height={64} />}>
+      <FooterContent />
+    </Suspense>
+  )
+}
+function FooterContent() {
+  return (
+    <AppBar
+      component="footer"
+      position="static"
+      sx={{ bgcolor: 'neutral800.main' }}
+      elevation={0}
+    >
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        sx={{ px: 2, py: 1 }}
+        gap={2}
+      >
+        <Typography variant="caption" sx={{ color: 'neutral400.main' }}>
+          Build:
+          <a
+            href={
+              process.env.NX_URL_GITHUB_GO_CURRENT_VERSION ||
+              `${process.env.NX_URL_GITHUB_GO}/releases`
+            }
+            target="_blank"
+            rel="noreferrer"
+            style={{ color: 'inherit' }}
+          >
+            {process.env.NX_URL_GITHUB_GO_CURRENT_VERSION?.replace(
+              /.*commit\//,
+              ''
+            ).substring(0, 7)}
+          </a>
+        </Typography>
+      </Box>
+    </AppBar>
+  )
+}