stack the react and console panels

Author: tsnobip

src/ConsolePanel.res

@@ -20,14 +20,13 @@ let make = (~logs, ~setLogs) => {
     Some(() => Webapi.Window.removeEventListener("message", cb))
   }, [])
 
-  <div>
+  <div className="px-2 py-6 relative">
+    <h2 className="font-bold text-gray-5/50 absolute right-2 top-2"> {React.string("Console")} </h2>
     {switch logs {
     | [] =>
-      <div className="m-2">
-        {React.string(
-          "Add some 'Console.log' to your code and enable 'Auto-run' to see your logs here.",
-        )}
-      </div>
+      React.string(
+        "Add some 'Console.log' to your code and enable 'Auto-run' to see your logs here.",
+      )
     | logs =>
       let content =
         logs

src/OutputPanel.res

@@ -0,0 +1,8 @@
+@react.component
+let make = (~runOutput, ~compilerState, ~logs, ~setLogs) => {
+  <div className="h-full">
+    <RenderPanel runOutput compilerState clearLogs={() => setLogs(_ => [])} />
+    <hr className="border-gray-60" />
+    <ConsolePanel logs setLogs />
+  </div>
+}

src/Playground.res

@@ -22,7 +22,7 @@ open CompilerManagerHook
 module Api = RescriptCompilerApi
 
 type layout = Column | Row
-type tab = JavaScript | RenderOutput | Console | Problems | Settings
+type tab = JavaScript | Output | Problems | Settings
 let breakingPoint = 1024
 
 module DropdownSelect = {
@@ -1331,8 +1331,7 @@ module OutputPanel = {
     let (logs, setLogs) = React.useState(_ => [])
 
     let tabs = [
-      (RenderOutput, <RenderPanel runOutput compilerState clearLogs={() => setLogs(_ => [])} />),
-      (Console, <ConsolePanel logs setLogs />),
+      (Output, <OutputPanel runOutput compilerState logs setLogs />),
       (JavaScript, output),
       (Problems, errorPane),
       (Settings, settingsPane),
@@ -1714,12 +1713,11 @@ let make = (~versions: array<string>) => {
     "flex-1 items-center p-4 border-t-4 border-transparent " ++ activeClass
   }
 
-  let tabs = [JavaScript, RenderOutput, Console, Problems, Settings]
+  let tabs = [JavaScript, Output, Problems, Settings]
 
   let headers = Belt.Array.mapWithIndex(tabs, (i, tab) => {
     let title = switch tab {
-    | RenderOutput => "Render Output"
-    | Console => "Console"
+    | Output => "Output"
     | JavaScript => "JavaScript"
     | Problems => "Problems"
     | Settings => "Settings"

src/RenderPanel.res

@@ -25,12 +25,15 @@ let make = (~compilerState: CompilerManagerHook.state, ~clearLogs, ~runOutput) =
     None
   }, (compilerState, runOutput))
 
-  <div className="p-2">
+  <div className={`px-2 relative ${validReact ? "h-1/2 py-2" : "h-auto py-6"}`}>
+    <h2 className="font-bold text-gray-5/50 absolute right-2 top-2"> {React.string("React")} </h2>
     {validReact
       ? React.null
       : React.string(
           "Create a React component called 'App' if you want to render it here, then enable 'Auto-run'.",
         )}
-    <EvalIFrame />
+    <div className={validReact ? "h-full" : "h-0"}>
+      <EvalIFrame />
+    </div>
   </div>
 }