Simplify examples

Author: bendera

packages/demo/src/routes/CheckboxPage.tsx

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

packages/demo/src/routes/RadioPage.tsx

@@ -1,21 +1,21 @@
 import { VscodeRadio, VscodeRadioGroup } from "@vscode-elements/react-elements";
 
+function logEvents(ev: unknown) {
+  console.log(ev);
+}
+
 export default function RadioPage() {
   return (
     <div>
       <h1>Radio</h1>
       <h2>Change event</h2>
       <p>
         <VscodeRadioGroup
-          onChange={(ev) => {
-            console.log(ev);
-          }}
+          onChange={logEvents}
         >
           <VscodeRadio
             name="radio-1"
-            onChange={(ev) => {
-              console.log(ev);
-            }}
+            onChange={logEvents}
           >
             Option #1
           </VscodeRadio>
@@ -29,9 +29,7 @@ export default function RadioPage() {
           <VscodeRadioGroup>
             <VscodeRadio
               name="radio-2"
-              onInvalid={(ev) => {
-                console.log(ev);
-              }}
+              onInvalid={logEvents}
               required
             >
               Option #1

packages/demo/src/routes/SingleSelectPage.tsx

@@ -3,19 +3,19 @@ import {
   VscodeSingleSelect,
 } from "@vscode-elements/react-elements";
 
+function logEvents(ev: unknown) {
+  console.log(ev);
+}
+
 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);
-          }}
+          onChange={logEvents}
+          onClick={logEvents}
         >
           <VscodeOption>Lorem</VscodeOption>
           <VscodeOption>Ipsum</VscodeOption>
@@ -26,9 +26,7 @@ export default function SingleSelectPage() {
       <form action="#">
         <p>
           <VscodeSingleSelect
-            onInvalid={(ev) => {
-              console.log(ev);
-            }}
+            onInvalid={logEvents}
             required
             name="select-2"
           >