Add more examples

Author: bendera

packages/demo/src/main.tsx

@@ -5,6 +5,8 @@ import "./index.css";
 import Root from "./routes/Root.tsx";
 import BadgePage from "./routes/BadgePage.tsx";
 import CheckboxPage from "./routes/CheckboxPage.tsx";
+import RadioPage from "./routes/RadioPage.tsx";
+import SingleSelectPage from "./routes/SingleSelectPage.tsx";
 
 if (import.meta.env.DEV) {
   await import("@vscode-elements/webview-playground");
@@ -23,6 +25,14 @@ const router = createBrowserRouter([
         path: "/checkbox",
         element: <CheckboxPage />,
       },
+      {
+        path: "/radio",
+        element: <RadioPage />,
+      },
+      {
+        path: "/single-select",
+        element: <SingleSelectPage />,
+      },
     ],
   },
 ]);

packages/demo/src/routes/CheckboxPage.tsx

@@ -1,7 +1,7 @@
 import { VscodeCheckbox } from "@vscode-elements/react-elements";
 import { useState } from "react";
 
-export default function BadgePage() {
+export default function CheckboxPage() {
   const [checked, setChecked] = useState(false);
   const [clickCount, setClickCount] = useState(0);
 

packages/demo/src/routes/RadioPage.tsx

@@ -0,0 +1,47 @@
+import { VscodeRadio, VscodeRadioGroup } from "@vscode-elements/react-elements";
+
+export default function RadioPage() {
+  return (
+    <div>
+      <h1>Radio</h1>
+      <h2>Change event</h2>
+      <p>
+        <VscodeRadioGroup
+          onChange={(ev) => {
+            console.log(ev);
+          }}
+        >
+          <VscodeRadio
+            name="radio-1"
+            onChange={(ev) => {
+              console.log(ev);
+            }}
+          >
+            Option #1
+          </VscodeRadio>
+          <VscodeRadio name="radio-1">Option #2</VscodeRadio>
+          <VscodeRadio name="radio-1">Option #3</VscodeRadio>
+        </VscodeRadioGroup>
+      </p>
+      <h2>Invalid event</h2>
+      <form action="#">
+        <p>
+          <VscodeRadioGroup>
+            <VscodeRadio
+              name="radio-2"
+              onInvalid={(ev) => {
+                console.log(ev);
+              }}
+              required
+            >
+              Option #1
+            </VscodeRadio>
+            <VscodeRadio name="radio-2">Option #2</VscodeRadio>
+            <VscodeRadio name="radio-2">Option #3</VscodeRadio>
+          </VscodeRadioGroup>
+          <button type="submit">Submit</button>
+        </p>
+      </form>
+    </div>
+  );
+}

packages/demo/src/routes/Root.tsx

@@ -8,6 +8,8 @@ export default function Root() {
         <ul>
           <li><a href="/badge">Badge</a></li>
           <li><a href="/checkbox">Checkbox</a></li>
+          <li><a href="/radio">Radio</a></li>
+          <li><a href="/single-select">Single Select</a></li>
         </ul>
       </aside>
       <main>

packages/demo/src/routes/SingleSelectPage.tsx

@@ -0,0 +1,45 @@
+import {
+  VscodeOption,
+  VscodeSingleSelect,
+} from "@vscode-elements/react-elements";
+
+export default function SingleSelectPage() {
+  return (
+    <div>
+      <h1>Single Select</h1>
+      <h2>Listen "change" and "click" events</h2>
+      <p>
+        <VscodeSingleSelect
+          onChange={(ev) => {
+            console.log(ev);
+          }}
+          onClick={(ev) => {
+            console.log(ev);
+          }}
+        >
+          <VscodeOption>Lorem</VscodeOption>
+          <VscodeOption>Ipsum</VscodeOption>
+          <VscodeOption>Dolor</VscodeOption>
+        </VscodeSingleSelect>
+      </p>
+      <h2>Listen "invalid" event</h2>
+      <form action="#">
+        <p>
+          <VscodeSingleSelect
+            onInvalid={(ev) => {
+              console.log(ev);
+            }}
+            required
+            name="select-2"
+          >
+            <VscodeOption></VscodeOption>
+            <VscodeOption>Lorem</VscodeOption>
+            <VscodeOption>Ipsum</VscodeOption>
+            <VscodeOption>Dolor</VscodeOption>
+          </VscodeSingleSelect>
+        </p>
+        <button>Submit</button>
+      </form>
+    </div>
+  );
+}