From b906b42998d3330e5028fc1b0e80dff75148b2ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 16 Apr 2024 22:12:51 -0500
Subject: [PATCH] feat: search bar

---
 src/components/Navbar/index.tsx | 183 ++++++++++++++++----------------
 1 file changed, 91 insertions(+), 92 deletions(-)

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 86f8a0373..a388720d0 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,9 +1,8 @@
-import { DiscordLogoIcon } from '@radix-ui/react-icons';
-import { Flex, Text, Theme } from '@radix-ui/themes';
+import { HamburgerMenuIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Flex, IconButton, TextField } 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() {
@@ -12,101 +11,101 @@ export default function Navbar() {
   if (isFullScreen) return null;
 
   return (
-    <Theme radius="none">
-      <div
-        style={{
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          width: '100%',
-          zIndex: 1,
-          padding: '1rem',
-          background: theme.colors.appBackground1_alpha,
-          borderBottom: theme.borderStyles.nonInteractive,
-          backdropFilter: 'blur(4rem)',
-          boxSizing: 'border-box',
-        }}
-      >
-        <Flex justify="center">
-          <Flex
-            justify="between"
-            align="center"
-            style={{ maxWidth: 800, width: '100%', padding: '0 16px' }}
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        zIndex: 1,
+        padding: '1rem',
+        background: theme.colors.appBackground1_alpha,
+        borderBottom: theme.borderStyles.nonInteractive,
+        backdropFilter: 'blur(4rem)',
+        boxSizing: 'border-box',
+      }}
+    >
+      <Flex justify="center">
+        <Flex
+          justify="between"
+          align="center"
+          style={{ maxWidth: 800, width: '100%', padding: '0 16px' }}
+          gap="4"
+        >
+          <Link
+            href="/"
+            style={{
+              color: 'inherit',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
           >
-            <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' }}
-                  target="_blank"
-                >
-                  by TrèsAbhi
-                </Link>
-              </Text>
-            </Flex>
+            <BlitzkriegWormWide />
+          </Link>
 
-            <Flex justify="center" align="center" gap="4">
-              <Link
-                href="https://discord.gg/nDt7AjGJQH"
-                target="_blank"
-                style={{
-                  color: 'inherit',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                <DiscordLogoIcon width={16} height={16} />
-              </Link>
+          <TextField.Root
+            placeholder="Search player, tanks, clans, anything..."
+            style={{ flex: 1 }}
+          >
+            <TextField.Slot>
+              <MagnifyingGlassIcon />
+            </TextField.Slot>
+          </TextField.Root>
 
-              <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>
+          <IconButton variant="ghost">
+            <HamburgerMenuIcon />
+          </IconButton>
 
-              <Link
-                href="https://www.patreon.com/tresabhi"
-                target="_blank"
+          {/* <Flex justify="center" align="center" gap="4">
+            <Link
+              href="https://discord.gg/nDt7AjGJQH"
+              target="_blank"
+              style={{
+                color: 'inherit',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <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={{
-                  color: 'inherit',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
+                  width: 20,
+                  height: 20,
+                  objectFit: 'contain',
                 }}
-              >
-                <PatreonIcon width={14} height={14} />
-              </Link>
-            </Flex>
-          </Flex>
+              />
+            </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>
-      </div>
-    </Theme>
+      </Flex>
+    </div>
   );
 }