feat: isolated footer

src/app/layout.tsx

@@ -1,22 +1,13 @@
 'use client';
 
-import {
+import { AlertDialog, Button, Flex, ScrollArea, Theme } from '@radix-ui/themes';
-  AlertDialog,
-  Button,
-  Card,
-  Code,
-  Flex,
-  ScrollArea,
-  Text,
-  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 }} />
-
+                  <Footer />
-                  <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>
                 </>
               )}
             </Flex>

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>
+  );
+}