import React from "react";
import ReactDOM from "react-dom";
import {
  usePlaygroundState,
  PlaygroundEditor,
  PlaygroundPreview,
} from "reakit-playground";

const initialCode = `import React from "react";
import { Provider, Button } from "reakit";

function Example() {
  return (
    <Provider>
      <Button>Button</Button>
    </Provider>
  );
}
`;

function App() {
  const playground = usePlaygroundState({ code: initialCode });
  return (
    <div>
      <PlaygroundPreview {...playground} />
      <PlaygroundEditor {...playground} readOnly />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));