feat: search bar

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,7 +11,6 @@ export default function Navbar() {
   if (isFullScreen) return null;
 
   return (
-    <Theme radius="none">
     <div
       style={{
         position: 'fixed',
@@ -32,8 +30,8 @@ export default function Navbar() {
           justify="between"
           align="center"
           style={{ maxWidth: 800, width: '100%', padding: '0 16px' }}
+          gap="4"
         >
-            <Flex justify="center" align="center" gap="2">
           <Link
             href="/"
             style={{
@@ -45,19 +43,21 @@ export default function Navbar() {
           >
             <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>
 
-            <Flex justify="center" align="center" gap="4">
+          <TextField.Root
+            placeholder="Search player, tanks, clans, anything..."
+            style={{ flex: 1 }}
+          >
+            <TextField.Slot>
+              <MagnifyingGlassIcon />
+            </TextField.Slot>
+          </TextField.Root>
+
+          <IconButton variant="ghost">
+            <HamburgerMenuIcon />
+          </IconButton>
+
+          {/* <Flex justify="center" align="center" gap="4">
             <Link
               href="https://discord.gg/nDt7AjGJQH"
               target="_blank"
@@ -103,10 +103,9 @@ export default function Navbar() {
             >
               <PatreonIcon width={14} height={14} />
             </Link>
-            </Flex>
+          </Flex> */}
         </Flex>
       </Flex>
     </div>
-    </Theme>
   );
 }