From c9378ceb8c0304206ec18afa639d99bdca5fb085 Mon Sep 17 00:00:00 2001
From: Corey <coco@solos.dev>
Date: Fri, 3 May 2024 04:10:32 +0000
Subject: [PATCH] Add a link to ko-fi

---
 client/src/components/Footer.tsx | 44 +++++++++++++++++++++++++-------
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
index d96c877..828321d 100644
--- a/client/src/components/Footer.tsx
+++ b/client/src/components/Footer.tsx
@@ -16,15 +16,41 @@ export default function Footer() {
   return (
     <Box className="bottom-0 w-full flex-none">
       <AppBar position="relative">
-        <Toolbar className="min-h-min justify-end">
-          <Tooltip title="About" arrow disableInteractive>
-            <IconButton component={Link} to="/about" onClick={scrollToTop}>
-              <QuestionMark />
-            </IconButton>
-          </Tooltip>
-          <IconButton onClick={switchColorMode}>
-            {theme.palette.mode === 'dark' ? <Brightness7 /> : <Brightness4 />}
-          </IconButton>
+        <Toolbar className="min-h-min justify-between">
+          <Box>
+            <Tooltip title="Support Me" arrow disableInteractive>
+              <a
+                href="https://ko-fi.com/A0A7WFPSL"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <img
+                  style={{
+                    maxHeight: '2.5em',
+                    verticalAlign: 'middle',
+                  }}
+                  src="https://storage.ko-fi.com/cdn/brandasset/kofi_s_logo_nolabel.png"
+                  alt="Buy Me a Coffee at ko-fi.com"
+                />
+              </a>
+            </Tooltip>
+          </Box>
+          <Box>
+            <Tooltip title="About" arrow disableInteractive>
+              <IconButton component={Link} to="/about" onClick={scrollToTop}>
+                <QuestionMark />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Toggle Theme" arrow disableInteractive>
+              <IconButton onClick={switchColorMode}>
+                {theme.palette.mode === 'dark' ? (
+                  <Brightness7 />
+                ) : (
+                  <Brightness4 />
+                )}
+              </IconButton>
+            </Tooltip>
+          </Box>
         </Toolbar>
       </AppBar>
     </Box>