tabs

src/client/index.tsx

@@ -290,14 +290,31 @@ const TabContent = define('TabContent', {
   }
 })
 
-const NavButton = define('NavButton', {
-  render({ props }) {
-    return (
-      <Button onClick={props.onClick} style={{ marginRight: 10, marginBottom: 20 }}>
-        {props.children}
-      </Button>
-    )
-  }
+const TabBar = define('TabBar', {
+  display: 'flex',
+  gap: 24,
+  marginBottom: 20,
+})
+
+const Tab = define('Tab', {
+  base: 'button',
+  padding: '6px 0',
+  background: 'none',
+  border: 'none',
+  borderBottom: '2px solid transparent',
+  cursor: 'pointer',
+  fontSize: 14,
+  color: theme('colors-textMuted'),
+  selectors: {
+    '&:hover': { color: theme('colors-text') },
+  },
+  variants: {
+    active: {
+      color: theme('colors-text'),
+      borderBottomColor: theme('colors-primary'),
+      fontWeight: 500,
+    },
+  },
 })
 
 function setSelectedTab(tab: 'overview' | 'todo') {
@@ -306,10 +323,12 @@ function setSelectedTab(tab: 'overview' | 'todo') {
 }
 
 const Nav = () => {
-  return <>
-    <NavButton onClick={() => setSelectedTab('overview')}>Overview</NavButton>
-    <NavButton onClick={() => setSelectedTab('todo')}>TODO</NavButton>
-  </>
+  return (
+    <TabBar>
+      <Tab active={selectedTab === 'overview' ? true : undefined} onClick={() => setSelectedTab('overview')}>Overview</Tab>
+      <Tab active={selectedTab === 'todo' ? true : undefined} onClick={() => setSelectedTab('todo')}>TODO</Tab>
+    </TabBar>
+  )
 }
 
 const stateLabels: Record<AppState, string> = {