Show version in footer

src/components/atoms/Footer.tsx

@@ -1,35 +1,54 @@
+import { Typography } from '@mui/joy';
 import Box from '@mui/joy/Box';
 import Link from '@mui/joy/Link';
 
 import DiscordIcon from './icons/Discord';
 import GitHubIcon from './icons/GitHub';
 
-export default function Footer() {
+import type { PropsWithChildren } from 'react';
+
+function Row({ children }: PropsWithChildren) {
   return (
     <Box
       sx={{
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: 1.5,
+        gap: 1,
       }}
     >
-      <Link
-        color="neutral"
-        href="https://github.com/ari-party/mtc-artillery"
-        target="_blank"
-      >
-        <GitHubIcon />
-      </Link>
-
-      <Link
-        color="neutral"
-        href="https://discord.com/users/449250687868469258"
-        target="_blank"
-      >
-        <DiscordIcon />
-      </Link>
+      {children}
     </Box>
   );
 }
+
+export default function Footer({ version }: { version: string }) {
+  return (
+    <Row>
+      <Row>
+        <Link
+          color="neutral"
+          href="https://github.com/ari-party/mtc-artillery"
+          target="_blank"
+        >
+          <GitHubIcon />
+        </Link>
+
+        <Link
+          color="neutral"
+          href="https://discord.com/users/449250687868469258"
+          target="_blank"
+        >
+          <DiscordIcon />
+        </Link>
+      </Row>
+
+      <Typography level="body-sm">•</Typography>
+
+      <Typography level="body-sm" component="code">
+        {version}
+      </Typography>
+    </Row>
+  );
+}

src/components/layout/Page.tsx

@@ -6,7 +6,10 @@ import Theme from '../utils/Theme';
 
 import type { PropsWithChildren } from 'react';
 
-export default function Page({ children }: PropsWithChildren) {
+export default function Page({
+  children,
+  version,
+}: PropsWithChildren<{ version: string }>) {
   return (
     <Theme>
       <Box
@@ -24,7 +27,7 @@ export default function Page({ children }: PropsWithChildren) {
       >
         <Box>{children}</Box>
 
-        <Footer />
+        <Footer version={version} />
       </Box>
     </Theme>
   );

src/pages/index.tsx

@@ -22,7 +22,19 @@ import {
   calculateElevation,
 } from '@/utils/math';
 
-export default function Index() {
+import type { GetStaticPropsResult, InferGetStaticPropsType } from 'next';
+
+export async function getStaticProps(): Promise<
+  GetStaticPropsResult<{ version: string }>
+> {
+  const version = (process.env.VERCEL_GIT_COMMIT_SHA ?? 'dev').slice(0, 9);
+
+  return { props: { version } };
+}
+
+export default function Index({
+  version,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
   const hasHydrated = useHasHydrated();
   const [mapIndex, setMapIndex] = useDataStore((s) => [
     s.mapIndex,
@@ -55,7 +67,7 @@ export default function Index() {
         <title>MTC Artillery</title>
       </Head>
 
-      <Page>
+      <Page version={version}>
         {hasHydrated && (
           <Stack gap={2.5} width={450}>
             <Box