added udels editor and header

website/src/components/Udels/Udels.jsx

@@ -2,6 +2,7 @@ import { code2hash } from '@strudel/core';
 
 import { UdelFrame } from './UdelFrame';
 import { useState } from 'react';
+import UdelsHeader from './UdelsHeader';
 
 function NumberInput({ value, onChange, label = '', min, max }) {
   const [localState, setLocalState] = useState(value);
@@ -68,7 +69,6 @@ export function Udels() {
   return (
     <div
       style={{
-        backgroundColor: 'teal',
         margin: 0,
         display: 'flex',
         flex: 1,
@@ -77,7 +77,8 @@ export function Udels() {
         flexDirection: 'column',
       }}
     >
-      <div
+      <UdelsHeader numWindows={numWindows} setNumWindows={numWindowsOnChange} />
+      {/* <div
         style={{
           height: 40,
           width: '100',
@@ -87,7 +88,7 @@ export function Udels() {
         }}
       >
         <NumberInput min={1} max={8} value={numWindows} onChange={numWindowsOnChange} />
-      </div>
+      </div> */}
       <div
         style={{
           display: 'flex',

website/src/components/Udels/UdelsEditor.jsx

@@ -0,0 +1,34 @@
+import { ReplContext } from '@src/repl/util.mjs';
+
+import Loader from '@src/repl/Loader';
+import { Panel } from '@src/repl/panel/Panel';
+import { Code } from '@src/repl/components/Code';
+import BigPlayButton from '@src/repl/components/BigPlayButton';
+import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
+
+// type Props = {
+//  context: replcontext,
+//  containerRef:  React.MutableRefObject<HTMLElement | null>,
+//  editorRef:  React.MutableRefObject<HTMLElement | null>,
+//  error: Error
+//  init: () => void
+// }
+
+export default function UdelsEditor(Props) {
+  const { context, containerRef, editorRef, error, init } = Props;
+  const { pending, started, handleTogglePlay } = context;
+  return (
+    <ReplContext.Provider value={context}>
+      <div className={'h-full flex w-full flex-col relative'}>
+        <Loader active={pending} />
+        {/* <Header context={context} /> */}
+        <BigPlayButton started={started} handleTogglePlay={handleTogglePlay} />
+        <div className="grow flex relative overflow-hidden">
+          <Code containerRef={containerRef} editorRef={editorRef} init={init} />
+        </div>
+        <UserFacingErrorMessage error={error} />
+        <Panel context={context} />
+      </div>
+    </ReplContext.Provider>
+  );
+}

website/src/components/Udels/UdelsHeader.tsx

@@ -0,0 +1,25 @@
+import NumberInput from '@src/repl/panel/NumberInput';
+
+export default function UdelsHeader(Props) {
+  const { numWindows, setNumWindows } = Props;
+
+  return (
+    <header id="header" className="flex text-white  z-[100] text-lg select-none bg-neutral-900">
+      <div className="px-4 items-center gap-2  flex space-x-2 md:pt-0 select-none">
+        <h1 onClick={() => {}} className={'text-l cursor-pointer flex gap-4'}>
+          <div
+            className={'mt-[1px] cursor-pointer'}
+          >
+            🌀
+          </div>
+         
+            <div className={'animate-pulse'}>
+              <span className="">strudel</span> <span className="text-sm">-UDELS</span>
+            </div>
+          
+        </h1>
+        <NumberInput value={numWindows} setValue={setNumWindows} />
+      </div>
+    </header>
+  );
+}