added udels editor and header

website/src/repl/components/BigPlayButton.jsx

@@ -0,0 +1,22 @@
+import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
+
+// type Props = {
+//   started: boolean;
+//   handleTogglePlay: () => void;
+// };
+export default function BigPlayButton(Props) {
+  const { started, handleTogglePlay } = Props;
+  if (started) {
+    return;
+  }
+
+  return (
+    <button
+      onClick={() => handleTogglePlay()}
+      className="text-white text-2xl fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-[1000] m-auto p-4 bg-black rounded-md flex items-center space-x-2"
+    >
+      <PlayCircleIcon className="w-6 h-6" />
+      <span>play</span>
+    </button>
+  );
+}

website/src/repl/components/Code.jsx

@@ -0,0 +1,23 @@
+
+
+// type Props = {
+//   containerRef:  React.MutableRefObject<HTMLElement | null>,
+//   editorRef:  React.MutableRefObject<HTMLElement | null>,
+//   init: () => void
+// }
+export function Code(Props) {
+const {editorRef, containerRef, init} = Props;
+
+  return (
+    <section
+      className={'text-gray-100 cursor-text pb-0 overflow-auto grow'}
+      id="code"
+      ref={(el) => {
+        containerRef.current = el;
+        if (!editorRef.current) {
+          init();
+        }
+      }}
+    ></section>
+  );
+}

website/src/repl/components/UserFacingErrorMessage.jsx

@@ -0,0 +1,8 @@
+// type Props = { error: Error | null };
+export default function UserFacingErrorMessage(Props) {
+  const { error } = Props;
+  if (error == null) {
+    return;
+  }
+  return <div className="text-red-500 p-4 bg-lineHighlight animate-pulse">{error.message || 'Unknown Error :-/'}</div>;
+}