feat: session toolbar

src/app/tools/session/page.css.ts

@@ -0,0 +1,23 @@
+import { style } from '@vanilla-extract/css';
+
+export const toolBar = style({
+  '@media': {
+    'screen and (min-width: 640px)': {
+      flexDirection: 'row',
+    },
+  },
+
+  flexDirection: 'column',
+  display: 'flex',
+  gap: 8,
+});
+
+export const button = style({
+  '@media': {
+    'screen and (min-width: 640px)': {
+      flex: 0,
+    },
+  },
+
+  flex: 1,
+});

src/app/tools/session/page.tsx

@@ -1,3 +1,29 @@
+'use client';
+
+import { CopyIcon, ListBulletIcon, ReloadIcon } from '@radix-ui/react-icons';
+import { Button } from '../../../components/Button';
+import PageWrapper from '../../../components/PageWrapper';
+import { SearchBar } from '../../../components/SearchBar';
+import * as styles from './page.css';
+
 export default function Page() {
-  return 'inner';
+  return (
+    <PageWrapper>
+      <div className={styles.toolBar}>
+        <SearchBar style={{ flex: 1 }} placeholder="Search for a player..." />
+
+        <div style={{ display: 'flex', gap: 8 }}>
+          <Button className={styles.button} color="dangerous">
+            <ReloadIcon /> Reset
+          </Button>
+          <Button className={styles.button}>
+            <CopyIcon /> Embed
+          </Button>
+          <Button className={styles.button}>
+            <ListBulletIcon /> Options
+          </Button>
+        </div>
+      </div>
+    </PageWrapper>
+  );
 }