feat: non nested spans

src/components/Footer.tsx

@@ -1,38 +0,0 @@
-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>
-  );
-}

src/components/Footer/components/WoTBVersion.tsx

@@ -0,0 +1,13 @@
+import { Code } from '@radix-ui/themes';
+import { use } from 'react';
+import { gameDefinitions } from '../../../core/blitzkrieg/gameDefinitions';
+
+export function WoTBVersion() {
+  const awaitedGameDefinitions = use(gameDefinitions);
+
+  return (
+    <Code color="gray" size="2">
+      {awaitedGameDefinitions.version}
+    </Code>
+  );
+}

src/components/Footer/index.tsx

@@ -0,0 +1,54 @@
+import { Card, Code, Flex, Link, Spinner, Text, Theme } from '@radix-ui/themes';
+import { Suspense } from 'react';
+import packageJSON from '../../../package.json';
+import { useWideFormat } from '../../hooks/useWideFormat';
+import { WoTBVersion } from './components/WoTBVersion';
+
+export function Footer() {
+  const wideFormat = useWideFormat();
+
+  return (
+    <Theme radius="none">
+      <Card>
+        <Flex justify="center">
+          <Flex
+            justify={wideFormat ? 'between' : 'center'}
+            style={{
+              flex: 1,
+              maxWidth: 800,
+              padding: '0 16px',
+            }}
+          >
+            <Flex gap="1">
+              <Text color="gray" size="2">
+                Blitzkrieg
+              </Text>
+
+              <Code color="gray" size="2">
+                {packageJSON.version}
+              </Code>
+
+              <Text color="gray" size="2">
+                for WoTB
+              </Text>
+
+              <Suspense fallback={<Spinner />}>
+                <WoTBVersion />
+              </Suspense>
+            </Flex>
+
+            {wideFormat && (
+              <Link
+                size="2"
+                href="https://www.patreon.com/tresabhi"
+                target="_blank"
+              >
+                Consider donating on Patreon
+              </Link>
+            )}
+          </Flex>
+        </Flex>
+      </Card>
+    </Theme>
+  );
+}