feat: donation icons

src/app/layout.tsx

@@ -104,7 +104,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
             <PageWrapper>
               <a
                 target="_blank"
-                href="https://ko-fi.com/tresabhi"
+                href="https://www.patreon.com/tresabhi"
                 style={{ textDecoration: 'none' }}
               >
                 <Flex

src/components/Navbar/index.tsx

@@ -3,6 +3,7 @@ import { Flex, Text, Theme } from '@radix-ui/themes';
 import Link from 'next/link';
 import { useFullScreen } from '../../hooks/useFullScreen';
 import { BlitzkriegWormWide } from '../../icons/BlitzkriegWormWide';
+import { PatreonIcon } from '../../icons/Patreon';
 import { theme } from '../../stitches.config';
 
 export default function Navbar() {
@@ -56,9 +57,10 @@ export default function Navbar() {
               </Text>
             </Flex>
 
-            <Flex justify="center" align="center" gap="2">
+            <Flex justify="center" align="center" gap="4">
               <Link
                 href="https://discord.gg/nDt7AjGJQH"
+                target="_blank"
                 style={{
                   color: 'inherit',
                   display: 'flex',
@@ -66,7 +68,40 @@ export default function Navbar() {
                   justifyContent: 'center',
                 }}
               >
-                <DiscordLogoIcon />
+                <DiscordLogoIcon width={16} height={16} />
+              </Link>
+
+              <Link
+                href="https://ko-fi.com/tresabhi"
+                target="_blank"
+                style={{
+                  color: 'inherit',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <img
+                  src="https://i.imgur.com/QdqgdP2.png"
+                  style={{
+                    width: 20,
+                    height: 20,
+                    objectFit: 'contain',
+                  }}
+                />
+              </Link>
+
+              <Link
+                href="https://www.patreon.com/tresabhi"
+                target="_blank"
+                style={{
+                  color: 'inherit',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <PatreonIcon width={14} height={14} />
               </Link>
             </Flex>
           </Flex>

src/icons/Patreon.tsx

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+
+export function PatreonIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 436 476" {...props}>
+      <title>Patreon logo</title>
+      <path
+        fill="currentColor"
+        data-fill="1"
+        d="M436 143c-.084-60.778-47.57-110.591-103.285-128.565C263.528-7.884 172.279-4.649 106.214 26.424 26.142 64.089.988 146.596.051 228.883c-.77 67.653 6.004 245.841 106.83 247.11 74.917.948 86.072-95.279 120.737-141.623 24.662-32.972 56.417-42.285 95.507-51.929C390.309 265.865 436.097 213.011 436 143Z"
+      ></path>
+    </svg>
+  );
+}