fix: improve example playground

.gitignore

@@ -1,6 +1,6 @@
 node_modules/
 dist/
-example/src/mock/
+example/src/mock.js
 
 .idea/
 .vscode/

example/src/App.jsx

@@ -1,18 +1,30 @@
 import { useState } from 'react';
 
 function App() {
-  const [state, setState] = useState(null);
+  const [endpoint, setEndpoint] = useState('/admin/tokens');
+  const [res, setRes] = useState(null);
 
   return (
     <div className="App">
-     <button onClick={async () => {
-        const res = await (await fetch('/')).json()
-        setState(res)
-     }}>fetch</button>
+      <h2>GitHub API mock playground</h2>
+      <label>Endpoint: </label>
+      <input
+        type="text"
+        value={endpoint}
+        onChange={e => setEndpoint(e.target.value)}
+      />
+      <button
+        onClick={async () => {
+          const res = await (await fetch(endpoint)).json();
+          setRes(res);
+        }}
+      >
+        fetch
+      </button>
 
-     <pre>
-       <code>{state ? JSON.stringify(state, null, 4) : null}</code>
-     </pre>
+      <pre>
+        <code>{res ? JSON.stringify(res, null, 4) : null}</code>
+      </pre>
     </div>
   );
 }

example/src/index.css

@@ -8,6 +8,7 @@ body {
 }
 
 code {
+  font-size: 11px;
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }

package.json

@@ -17,7 +17,8 @@
   "scripts": {
     "build": "tsup",
     "fmt": "prettier {example,src}/**/*.{js,jsx,ts,tsx,css,md,html} --write",
-    "test": "vitest run"
+    "test": "vitest run",
+    "gen:example": "node ./dist/cli.js https://raw.githubusercontent.com/github/rest-api-description/main/descriptions/ghes-3.3/ghes-3.3.json --output ./example/src/mock.js"
   },
   "author": "zoubingwu<[email protected]>",
   "license": "MIT",