From bf7a319770cf7a3310c3437f91d3d09e6cc9d9f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 4 Dec 2023 19:27:23 -0600
Subject: [PATCH] feat: better navbar

---
 src/components/Navbar/components/Button.tsx | 21 ------
 src/components/Navbar/index.tsx             | 81 ++++++++++++++-------
 2 files changed, 53 insertions(+), 49 deletions(-)
 delete mode 100644 src/components/Navbar/components/Button.tsx

diff --git a/src/components/Navbar/components/Button.tsx b/src/components/Navbar/components/Button.tsx
deleted file mode 100644
index 123a464c5..000000000
--- a/src/components/Navbar/components/Button.tsx
+++ /dev/null
@@ -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>
-  );
-}
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index c2236e524..d03d6e331 100644
--- a/src/components/Navbar/index.tsx
+++ b/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>
   );
 }