Add Checkbox examples

Author: bendera

packages/demo/src/main.tsx

@@ -4,6 +4,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import "./index.css";
 import Root from "./routes/Root.tsx";
 import BadgePage from "./routes/BadgePage.tsx";
+import CheckboxPage from "./routes/CheckboxPage.tsx";
 
 if (import.meta.env.DEV) {
   await import("@vscode-elements/webview-playground");
@@ -18,6 +19,10 @@ const router = createBrowserRouter([
         path: "/badge",
         element: <BadgePage />,
       },
+      {
+        path: "/checkbox",
+        element: <CheckboxPage />,
+      },
     ],
   },
 ]);

packages/demo/src/routes/CheckboxPage.tsx

@@ -0,0 +1,30 @@
+import { VscodeCheckbox } from "@vscode-elements/react-elements";
+import { useState } from "react";
+
+export default function BadgePage() {
+  const [checked, setChecked] = useState(false);
+  const [clickCount, setClickCount] = useState(0);
+
+  return (
+    <div>
+      <h1>Checkbox</h1>
+      <p>
+        <VscodeCheckbox
+          checked={checked}
+          onChange={(ev) => {
+            console.log(ev);
+            setChecked(!checked);
+          }}
+          onClick={(ev) => {
+            console.log(ev);
+            setClickCount(clickCount + 1);
+          }}
+        >
+          Checkbox example
+        </VscodeCheckbox>
+      </p>
+      <p>Checkbox is {checked ? "checked" : "unchecked"}</p>
+      <p>Click count is {clickCount}</p>
+    </div>
+  );
+}

packages/demo/src/routes/Root.tsx

@@ -7,6 +7,7 @@ export default function Root() {
       <aside>
         <ul>
           <li><a href="/badge">Badge</a></li>
+          <li><a href="/checkbox">Checkbox</a></li>
         </ul>
       </aside>
       <main>