feat: homepage

src/components/Navbar/components/Button.tsx

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { theme } from '../../../stitches.config';
 
 interface ButtonProps {
   children: ReactNode;
@@ -9,7 +8,7 @@ export function Button({ children }: ButtonProps) {
   return (
     <button
       style={{
-        padding: theme.spaces.paddingMajor,
+        padding: 16,
         border: 'none',
         cursor: 'pointer',
         background: 'none',

src/components/Navbar/index.tsx

@@ -1,4 +1,5 @@
 import { HamburgerMenuIcon, PersonIcon } from '@radix-ui/react-icons';
+import Link from 'next/link';
 import { theme } from '../../stitches.config';
 import { BlitzkriegWormWide } from '../BlitzkriegWormWide';
 import { Button } from './components/Button';
@@ -7,17 +8,21 @@ export default function Navbar() {
   return (
     <div
       style={{
+        width: '100%',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         color: theme.colors.textHighContrast,
         backgroundColor: theme.colors.appBackground2,
+        borderBottom: theme.borderStyles.nonInteractive,
       }}
     >
       <Button>
         <HamburgerMenuIcon />
       </Button>
-      <BlitzkriegWormWide />
+      <Link href="/" style={{ color: 'inherit' }}>
+        <BlitzkriegWormWide />
+      </Link>
       <Button>
         <PersonIcon />
       </Button>

src/components/SearchBar.tsx

@@ -0,0 +1,45 @@
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { ComponentProps, forwardRef, useImperativeHandle, useRef } from 'react';
+import { theme } from '../stitches.config';
+
+export const SearchBar = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
+  (props, ref) => {
+    const input = useRef<HTMLInputElement>(null);
+
+    useImperativeHandle(ref, () => input.current!);
+
+    return (
+      <div
+        style={{
+          display: 'flex',
+          padding: 8,
+          borderRadius: 16,
+          border: theme.borderStyles.interactive,
+          backgroundColor: theme.colors.componentInteractive,
+          color: theme.colors.textLowContrast,
+          fontSize: 16,
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 8,
+          cursor: 'text',
+        }}
+        onClick={() => input.current?.focus()}
+      >
+        <MagnifyingGlassIcon style={{ width: '1em', height: '1em' }} />
+        <input
+          {...props}
+          ref={input}
+          style={{
+            flex: 1,
+            color: theme.colors.textHighContrast,
+            backgroundColor: 'transparent',
+            border: 'none',
+            outline: 'none',
+            fontSize: 'inherit',
+          }}
+          placeholder="Search tools..."
+        />
+      </div>
+    );
+  },
+);