From 17f4435a3096152bb2bbcdce0db7f2b0494d2870 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:10:54 -0500
Subject: [PATCH] feat: isolated footer

---
 src/app/layout.tsx        | 38 +++-----------------------------------
 src/components/Footer.tsx | 38 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Footer.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 965f56f61..bec49a677 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,22 +1,13 @@
 'use client';
 
-import {
-  AlertDialog,
-  Button,
-  Card,
-  Code,
-  Flex,
-  ScrollArea,
-  Text,
-  Theme,
-} from '@radix-ui/themes';
+import { AlertDialog, Button, Flex, ScrollArea, Theme } from '@radix-ui/themes';
 import '@radix-ui/themes/styles.css';
 import { config } from 'dotenv';
 import { Roboto_Flex } from 'next/font/google';
 import { usePathname } from 'next/navigation';
 import { ReactNode, use, useEffect, useState } from 'react';
-import packageJSON from '../../package.json';
 import { Analytics } from '../components/Analytics';
+import { Footer } from '../components/Footer';
 import Navbar from '../components/Navbar';
 import { gameDefinitions } from '../core/blitzkrieg/gameDefinitions';
 import isDev from '../core/blitzkrieg/isDev';
@@ -119,30 +110,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
               {!isEmbed && !isFullScreen && (
                 <>
                   <div style={{ flex: 1 }} />
-
-                  <Theme radius="none">
-                    <Card>
-                      <Flex justify="center">
-                        <Flex
-                          justify="between"
-                          style={{
-                            flex: 1,
-                            maxWidth: 800,
-                            padding: '0 16px',
-                          }}
-                        >
-                          <Text color="gray" size="2">
-                            Blitzkrieg <Code>{packageJSON.version}</Code> for
-                            WoTB <Code>{awaitedGameDefinitions.version}</Code>
-                          </Text>
-
-                          <Text color="gray" size="2">
-                            Free forever, for everyone.
-                          </Text>
-                        </Flex>
-                      </Flex>
-                    </Card>
-                  </Theme>
+                  <Footer />
                 </>
               )}
             </Flex>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 000000000..f22e2539a
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,38 @@
+import { Card, Code, Flex, Text, Theme } from '@radix-ui/themes';
+import { use } from 'react';
+import packageJSON from '../../package.json';
+import { gameDefinitions } from '../core/blitzkrieg/gameDefinitions';
+import { useWideFormat } from '../hooks/useWideFormat';
+
+export function Footer() {
+  const wideFormat = useWideFormat();
+  const awaitedGameDefinitions = use(gameDefinitions);
+
+  return (
+    <Theme radius="none">
+      <Card>
+        <Flex justify="center">
+          <Flex
+            justify={wideFormat ? 'between' : 'center'}
+            style={{
+              flex: 1,
+              maxWidth: 800,
+              padding: '0 16px',
+            }}
+          >
+            <Text color="gray" size="2">
+              Blitzkrieg <Code>{packageJSON.version}</Code> for WoTB{' '}
+              <Code>{awaitedGameDefinitions.version}</Code>
+            </Text>
+
+            {wideFormat && (
+              <Text color="gray" size="2">
+                Free forever, for everyone.
+              </Text>
+            )}
+          </Flex>
+        </Flex>
+      </Card>
+    </Theme>
+  );
+}