1import Loader from '@src/repl/components/Loader';
2import { BottomPanel } from '@src/repl/components/panel/Panel';
3import { Code } from '@src/repl/components/Code';
4import BigPlayButton from '@src/repl/components/BigPlayButton';
5import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
6
7// type Props = {
8//  context: replcontext,
9// }
10
11export default function UdelsEditor(Props) {
12  const { context, ...editorProps } = Props;
13  const { containerRef, editorRef, error, init, pending, started, handleTogglePlay } = context;
14
15  return (
16    <div className={'h-full flex w-full flex-col relative'} {...editorProps}>
17      <Loader active={pending} />
18      <BigPlayButton started={started} handleTogglePlay={handleTogglePlay} />
19      <div className="grow flex relative overflow-hidden">
20        <Code containerRef={containerRef} editorRef={editorRef} init={init} />
21      </div>
22      <UserFacingErrorMessage error={error} />
23      <BottomPanel context={context} />
24    </div>
25  );
26}