implement select

playground/fruit-select.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react"
+import { Button, Option, Select } from "../library/main"
+
+export function FruitSelect() {
+  const [value, setValue] = useState<string>()
+  const [finalChoice, setFinalChoice] = useState<string>()
+
+  if (finalChoice) {
+    return <>you chose {finalChoice}</>
+  }
+
+  return (
+    <>
+      {"_ _"}
+      <Select
+        placeholder="choose a fruit"
+        value={value}
+        onSelectValue={setValue}
+      >
+        <Option value="🍎" />
+        <Option value="🍌" />
+        <Option value="🍒" />
+      </Select>
+      <Button
+        label="confirm"
+        disabled={value == undefined}
+        onClick={() => setFinalChoice(value)}
+      />
+    </>
+  )
+}

playground/main.tsx

@@ -1,9 +1,10 @@
 import { Client } from "discord.js"
 import "dotenv/config"
 import React from "react"
-import { DiscordJsAdapter, Reacord } from "../library/main.js"
-import { createCommandHandler } from "./command-handler.js"
-import { Counter } from "./counter.js"
+import { DiscordJsAdapter, Reacord } from "../library/main"
+import { createCommandHandler } from "./command-handler"
+import { Counter } from "./counter"
+import { FruitSelect } from "./fruit-select"
 
 const client = new Client({
   intents: ["GUILDS"],
@@ -23,6 +24,13 @@ createCommandHandler(client, [
       reply.render(<Counter onDeactivate={() => reply.deactivate()} />)
     },
   },
+  {
+    name: "select",
+    description: "shows a select",
+    run: (interaction) => {
+      reacord.createCommandReply(interaction).render(<FruitSelect />)
+    },
+  },
 ])
 
 await client.login(process.env.TEST_BOT_TOKEN)