render into header

Author: milomg

playground/components/header.tsx

@@ -33,9 +33,11 @@ export const Header: Component<{
         <a href="https://github.com/solidjs/solid">
           <img src={logo} alt="solid-js logo" class="w-8" />
         </a>
-        <span class="inline-block -mb-1">
-          Solid<b>JS</b> Playground
-        </span>
+        <div id="project-name">
+          <span class="inline-block -mb-1">
+            Solid<b>JS</b> Playground
+          </span>
+        </div>
       </h1>
       <div class="flex items-center">
         <Dismiss

playground/pages/edit.tsx

@@ -3,7 +3,16 @@ import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
 import CompilerWorker from '../../src/workers/compiler?worker';
 import FormatterWorker from '../../src/workers/formatter?worker';
-import { createEffect, createResource, createSignal, lazy, Suspense } from 'solid-js';
+import {
+  createEffect,
+  createResource,
+  createSignal,
+  lazy,
+  onCleanup,
+  onMount,
+  ParentComponent,
+  Suspense,
+} from 'solid-js';
 import { useParams } from 'solid-app-router';
 import { API, useAppContext } from '../context';
 import createDebounce from '@solid-primitives/debounce';
@@ -55,6 +64,21 @@ const createTabList = () => {
   return mapTabs;
 };
 
+const RenderHeader: ParentComponent = (props) => {
+  onMount(() => {
+    const projectName = document.getElementById('project-name')!;
+    const content = projectName.firstChild!;
+    content.remove();
+    const children = props.children as HTMLElement;
+    projectName.appendChild(children);
+    onCleanup(() => {
+      projectName.appendChild(content);
+      projectName.removeChild(children);
+    });
+  });
+  return <></>;
+};
+
 export const Edit = (props: { dark: boolean; horizontal: boolean }) => {
   const compiler = new CompilerWorker();
   const formatter = new FormatterWorker();
@@ -148,6 +172,9 @@ export const Edit = (props: { dark: boolean; horizontal: boolean }) => {
         setCurrent={setCurrent}
         id="repl"
       />
+      <RenderHeader>
+        <input class="bg-transparent" value={resource()?.repl?.title || ''} />
+      </RenderHeader>
     </Suspense>
   );
 };