feat: better navbar

src/components/Navbar/components/Button.tsx

@@ -1,21 +0,0 @@
-import { ReactNode } from 'react';
-
-interface ButtonProps {
-  children: ReactNode;
-}
-
-export function Button({ children }: ButtonProps) {
-  return (
-    <button
-      style={{
-        padding: 16,
-        border: 'none',
-        cursor: 'pointer',
-        background: 'none',
-        color: 'inherit',
-      }}
-    >
-      {children}
-    </button>
-  );
-}

src/components/Navbar/index.tsx

@@ -1,38 +1,63 @@
+import { DiscordLogoIcon } from '@radix-ui/react-icons';
+import { Card, Flex, Text, Theme } from '@radix-ui/themes';
 import Link from 'next/link';
-import { theme } from '../../stitches.config';
 import { BlitzkriegWormWide } from '../BlitzkriegWormWide';
 
 export default function Navbar() {
   return (
-    <div
-      style={{
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        color: theme.colors.textHighContrast,
-        backgroundColor: theme.colors.appBackground2,
-        borderBottom: theme.borderStyles.nonInteractive,
-        height: 48, // TODO: remove this when the icons are implemented
-      }}
-    >
-      {/* <Button>
-        <HamburgerMenuIcon />
-      </Button> */}
-      <Link
-        href="/"
+    <Theme radius="none">
+      <Card
         style={{
-          color: 'inherit',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
+          borderLeft: 'none',
+          borderTop: 'none',
+          borderRight: 'none',
         }}
       >
-        <BlitzkriegWormWide />
-      </Link>
-      {/* <Button>
-        <PersonIcon />
-      </Button> */}
-    </div>
+        <Flex justify="center">
+          <Flex
+            justify="between"
+            align="center"
+            style={{ maxWidth: 800, width: '100%', padding: '0 16px' }}
+          >
+            <Flex justify="center" align="center" gap="2">
+              <Link
+                href="/"
+                style={{
+                  color: 'inherit',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <BlitzkriegWormWide />
+              </Link>
+              <Text size="2">❤️</Text>
+              <Text size="2">
+                <Link
+                  href="https://tresabhi.github.io/"
+                  style={{ color: 'inherit', textDecoration: 'none' }}
+                >
+                  by TrèsAbhi
+                </Link>
+              </Text>
+            </Flex>
+
+            <Flex justify="center" align="center" gap="2">
+              <Link
+                href="https://discord.gg/nDt7AjGJQH"
+                style={{
+                  color: 'inherit',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <DiscordLogoIcon />
+              </Link>
+            </Flex>
+          </Flex>
+        </Flex>
+      </Card>
+    </Theme>
   );
 }