function App() {
  const [state, setState] = React.useState(initialState)
  const gui = React.useRef()
  return (
    <GuiPanel
      ref={gui}
      data={state}
      setData={setState}
      barMode="above"
      theme="light"
    >
      <GuiButton
        label="Toast"
        action={() => {
          gui.current.Toast('Current date: ' + Date.now())
        }}
      />
      <GuiText property="name" />
      <GuiTitle label="Options" />
      <GuiFile label="Select File" property="file" />
      <GuiDisplay property="name" />
      <GuiCheckbox property="checkeds" />
      <GuiColor property="color" />
      <GuiFolder label="Bounds Folder" open={true}>
        <GuiRange
          label="bounds"
          property="bounds"
          scale="log"
          onChange={value => console.log({ value })}
        />
        <GuiSelect property="movement" options={options} />
        <GuiInterval property="interval" min={5} max={70} />
      </GuiFolder>
    </GuiPanel>
  )
}

function ToastExample() {
  const [state, setState] = React.useState(initialState)
  const gui = React.useRef()
  return (
    <GuiPanel ref={gui} data={state} setData={setState}>
      <GuiButton
        label="Toast"
        action={() => gui.current.Toast('Hello from Toast')}
      />
    </GuiPanel>
  )
}