things

src/app/page.tsx

@@ -11,13 +11,30 @@ import * as styles from './page.css';
 export default function Page() {
   return (
     <PageWrapper>
-      <Flex direction="column" gap="4" justify="center" style={{ flex: 1 }}>
-        {/* <TextField.Root placeholder="Search anything...">
-          <TextField.Slot>
-            <MagnifyingGlassIcon height="16" width="16" />
-          </TextField.Slot>
-        </TextField.Root> */}
+      {/* <Flex
+        direction="column"
+        gap="6"
+        align="center"
+        justify="center"
+        style={{
+          height: '80vh',
+        }}
+      >
+        <BlitzkriegWormWide
+          style={{
+            height: 48,
+            width: '100%',
+          }}
+        />
 
+        <EverythingSearch size="3" style={{ width: '100%' }} />
+
+        <Button variant="ghost">
+          All tools <CaretDownIcon />
+        </Button>
+      </Flex> */}
+
+      <Flex direction="column" gap="4" justify="center" style={{ flex: 1 }}>
         <Flex gap="3" wrap="wrap" align="center" justify="center">
           {TOOLS.map((tool) => (
             <Link

src/components/Navbar/components/EverythingSearch.tsx

@@ -0,0 +1,42 @@
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Card, TextField } from '@radix-ui/themes';
+import { ComponentProps, useState } from 'react';
+
+export function EverythingSearch({
+  style,
+  ...props
+}: ComponentProps<typeof TextField.Root>) {
+  const [search, setSearch] = useState('');
+
+  return (
+    <>
+      <TextField.Root
+        value={search}
+        placeholder="Search tanks, players, clans..."
+        style={{ position: 'relative', ...style }}
+        onChange={(event) => {
+          setSearch(event.target.value.trim());
+        }}
+        {...props}
+      >
+        <TextField.Slot>
+          <MagnifyingGlassIcon />
+        </TextField.Slot>
+
+        {search.length > 0 && (
+          <TextField.Slot>
+            <Card
+              style={{
+                position: 'absolute',
+                top: 'calc(100% + 8px)',
+                left: 0,
+                width: '100%',
+                zIndex: 1,
+              }}
+            ></Card>
+          </TextField.Slot>
+        )}
+      </TextField.Root>
+    </>
+  );
+}

src/components/Navbar/index.tsx

@@ -1,12 +1,14 @@
-import { HamburgerMenuIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
-import { Flex, IconButton, TextField } from '@radix-ui/themes';
+import { HamburgerMenuIcon } from '@radix-ui/react-icons';
+import { Flex, IconButton } from '@radix-ui/themes';
 import Link from 'next/link';
 import { useFullScreen } from '../../hooks/useFullScreen';
 import { BlitzkriegWormWide } from '../../icons/BlitzkriegWormWide';
 import { theme } from '../../stitches.config';
+import { EverythingSearch } from './components/EverythingSearch';
 
 export default function Navbar() {
   const isFullScreen = useFullScreen();
+  // const pathName = usePathname();
 
   if (isFullScreen) return null;
 
@@ -44,14 +46,7 @@ export default function Navbar() {
             <BlitzkriegWormWide />
           </Link>
 
-          <TextField.Root
-            placeholder="Search player, tanks, clans, anything..."
-            style={{ flex: 1 }}
-          >
-            <TextField.Slot>
-              <MagnifyingGlassIcon />
-            </TextField.Slot>
-          </TextField.Root>
+          <EverythingSearch style={{ flex: 1 }} />
 
           <IconButton variant="ghost">
             <HamburgerMenuIcon />