From 11440bc6543fd9c2dddea3c9aa57492a86a77921 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:37:50 -0500
Subject: [PATCH] feat: non nested spans

---
 src/components/Footer.tsx                     | 38 -------------
 .../Footer/components/WoTBVersion.tsx         | 13 +++++
 src/components/Footer/index.tsx               | 54 +++++++++++++++++++
 3 files changed, 67 insertions(+), 38 deletions(-)
 delete mode 100644 src/components/Footer.tsx
 create mode 100644 src/components/Footer/components/WoTBVersion.tsx
 create mode 100644 src/components/Footer/index.tsx

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
deleted file mode 100644
index f22e2539a..000000000
--- a/src/components/Footer.tsx
+++ /dev/null
@@ -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>
-  );
-}
diff --git a/src/components/Footer/components/WoTBVersion.tsx b/src/components/Footer/components/WoTBVersion.tsx
new file mode 100644
index 000000000..0f4b1acbd
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
new file mode 100644
index 000000000..0d1da94e1
--- /dev/null
+++ b/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>
+  );
+}