1 files changed, 90 insertions, 56 deletions
diff --git a/packages/ui/src/app.tsx b/packages/ui/src/app.tsx
index be2ec357e..f42781543 100644
--- a/packages/ui/src/app.tsx
+++ b/packages/ui/src/app.tsx
@@ -1,66 +1,100 @@
 import type { Component } from "solid-js"
-import { Button } from "./components/button"
-import { Select } from "./components"
+import { Button, Select, Tabs } from "./components"
 import "@opencode-ai/css"
 import "./index.css"
 
 const App: Component = () => {
+  const Content = (props: { dark?: boolean }) => (
+    <div class={`${props.dark ? "dark" : ""}`}>
+      <h3>Buttons</h3>
+      <section>
+        <Button variant="primary" size="normal">
+          Normal Primary
+        </Button>
+        <Button variant="secondary" size="normal">
+          Normal Secondary
+        </Button>
+        <Button variant="ghost" size="normal">
+          Normal Ghost
+        </Button>
+        <Button variant="primary" size="large">
+          Large Primary
+        </Button>
+        <Button variant="secondary" size="large">
+          Large Secondary
+        </Button>
+        <Button variant="ghost" size="large">
+          Large Ghost
+        </Button>
+      </section>
+      <h3>Select</h3>
+      <section>
+        <Select
+          // we have to pass dark bc of the portal,
+          // normally wouldn't be needed bc root element
+          // would have theme class
+          class={props.dark ? "dark" : ""}
+          variant="primary"
+          options={["Option 1", "Option 2", "Option 3"]}
+          placeholder="Select Primary"
+        />
+        <Select
+          variant="secondary"
+          class={props.dark ? "dark" : ""}
+          options={["Option 1", "Option 2", "Option 3"]}
+          placeholder="Select Secondary"
+        />
+        <Select
+          variant="ghost"
+          class={props.dark ? "dark" : ""}
+          options={["Option 1", "Option 2", "Option 3"]}
+          placeholder="Select Ghost"
+        />
+      </section>
+      <h3>Tabs</h3>
+      <section>
+        <Tabs defaultValue="tab1" style={{ width: "100%" }}>
+          <Tabs.List>
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+            <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+            <Tabs.Trigger value="tab4" disabled>
+              Disabled Tab
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">
+            <div style={{ padding: "16px" }}>
+              <h4>Tab 1 Content</h4>
+              <p>This is the content for the first tab.</p>
+            </div>
+          </Tabs.Content>
+          <Tabs.Content value="tab2">
+            <div style={{ padding: "16px" }}>
+              <h4>Tab 2 Content</h4>
+              <p>This is the content for the second tab.</p>
+            </div>
+          </Tabs.Content>
+          <Tabs.Content value="tab3">
+            <div style={{ padding: "16px" }}>
+              <h4>Tab 3 Content</h4>
+              <p>This is the content for the third tab.</p>
+            </div>
+          </Tabs.Content>
+          <Tabs.Content value="tab4">
+            <div style={{ padding: "16px" }}>
+              <h4>Tab 4 Content</h4>
+              <p>This tab should be disabled.</p>
+            </div>
+          </Tabs.Content>
+        </Tabs>
+      </section>
+    </div>
+  )
+
   return (
     <main>
-      <div class="light">
-        <h3>Buttons</h3>
-        <section>
-          <Button variant="primary" size="normal">
-            Normal Primary
-          </Button>
-          <Button variant="secondary" size="normal">
-            Normal Secondary
-          </Button>
-          <Button variant="ghost" size="normal">
-            Normal Ghost
-          </Button>
-          <Button variant="primary" size="large">
-            Large Primary
-          </Button>
-          <Button variant="secondary" size="large">
-            Large Secondary
-          </Button>
-          <Button variant="ghost" size="large">
-            Large Ghost
-          </Button>
-        </section>
-        <h3>Select</h3>
-        <section>
-          <Select options={["a", "b", "c"]} onSelect={(x) => console.log(x)} placeholder="Select" />
-        </section>
-      </div>
-      <div class="dark">
-        <h3>Buttons</h3>
-        <section>
-          <Button variant="primary" size="normal">
-            Normal Primary
-          </Button>
-          <Button variant="secondary" size="normal">
-            Normal Secondary
-          </Button>
-          <Button variant="ghost" size="normal">
-            Normal Ghost
-          </Button>
-          <Button variant="primary" size="large">
-            Large Primary
-          </Button>
-          <Button variant="secondary" size="large">
-            Large Secondary
-          </Button>
-          <Button variant="ghost" size="large">
-            Large Ghost
-          </Button>
-        </section>
-        <h3>Select</h3>
-        <section>
-          <Select options={["a", "b", "c"]} onSelect={(x) => console.log(x)} placeholder="Select" />
-        </section>
-      </div>
+      <Content />
+      <Content dark />
     </main>
   )
 }