feat: navbar

src/components/Navbar/components/Button.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { theme } from '../../../stitches.config';
+
+interface ButtonProps {
+  children: ReactNode;
+}
+
+export function Button({ children }: ButtonProps) {
+  return (
+    <button
+      style={{
+        padding: theme.spaces.paddingMajor,
+        border: 'none',
+        cursor: 'pointer',
+        background: 'none',
+        color: 'inherit',
+      }}
+    >
+      {children}
+    </button>
+  );
+}

src/components/Navbar/index.tsx

@@ -0,0 +1,26 @@
+import { HamburgerMenuIcon, PersonIcon } from '@radix-ui/react-icons';
+import { theme } from '../../stitches.config';
+import { BlitzkriegWormWide } from '../BlitzkriegWormWide';
+import { Button } from './components/Button';
+
+export default function Navbar() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        color: theme.colors.textHighContrast,
+        backgroundColor: theme.colors.appBackground2,
+      }}
+    >
+      <Button>
+        <HamburgerMenuIcon />
+      </Button>
+      <BlitzkriegWormWide />
+      <Button>
+        <PersonIcon />
+      </Button>
+    </div>
+  );
+}