Cleaning up Playground toolbar

packages/components/src/components/ErrorBox.tsx

@@ -6,7 +6,7 @@ export const ErrorBox: React.FC<{
   children: React.ReactNode;
 }> = ({ heading = "Error", children }) => {
   return (
-    <div className="rounded-md bg-red-100 p-4 m-4">
+    <div className="rounded-md bg-red-100 p-4">
       <div className="flex">
         <div className="flex-shrink-0">
           <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />

packages/components/src/components/SquigglePlayground.tsx

@@ -11,7 +11,10 @@ import { defaultBindings, environment } from "@quri/squiggle-lang";
 import { Tab } from "@headlessui/react";
 import { CodeIcon } from "@heroicons/react/solid";
 import { CogIcon } from "@heroicons/react/solid";
+import { ChartSquareBarIcon } from "@heroicons/react/solid";
+import { CurrencyDollarIcon } from "@heroicons/react/solid";
 import { Fragment } from "react";
+import { ErrorBox } from "./ErrorBox";
 
 interface ShowBoxProps {
   height: number;
@@ -155,12 +158,21 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
   };
 
   // className="text-gray-400 group-hover:text-gray-500 -ml-0.5 mr-2 h-4 w-4"
-  let tab = (key) => {
+  let tab = (key, iconName) => {
     let iconStyle = (isSelected) =>
       classNames(
         "-ml-0.5 mr-2 h-4 w-4 ",
         isSelected ? "text-teal-500" : "text-gray-500 group-hover:text-gray-900"
       );
+
+    let icon = (selected) =>
+      ({
+        code: <CodeIcon className={iconStyle(selected)} />,
+        cog: <CogIcon className={iconStyle(selected)} />,
+        squareBar: <ChartSquareBarIcon className={iconStyle(selected)} />,
+        dollar: <CurrencyDollarIcon className={iconStyle(selected)} />,
+      }[iconName]);
+
     return (
       <Tab key={key} as={Fragment}>
         {({ selected }) => (
@@ -178,11 +190,7 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
                   : ""
               )}
             >
-              {key === "Code" ? (
+              {icon(selected)}
-                <CodeIcon className={iconStyle(selected)} />
-              ) : (
-                <CogIcon className={iconStyle(selected)} />
-              )}
               <span
                 className={classNames(
                   "",
@@ -202,17 +210,20 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
 
   return (
     <Tab.Group>
-      <div className="border border-slate-300 rounded-sm flex-col flex">
+      <div className=" flex-col flex">
-        <div className="border-b border-slate-300 rounded-tl-sm rounded-tr-sm p-2">
+        <div className="pb-4">
-            <Tab.List className="p-0.5 rounded-lg bg-slate-200 hover:bg-slate-300 inline-flex">
+          <Tab.List className="p-0.5 rounded-lg bg-slate-100 hover:bg-slate-200 inline-flex">
-              {tab("Code")}
+            {tab("Code", "code")}
-              {tab("Settings")}
+            {tab("Sampling Settings", "cog")}
+            {tab("View Settings", "squareBar")}
+            {tab("Input Variables", "dollar")}
           </Tab.List>
         </div>
         <div className="flex" style={{ height: height + "px" }}>
           <div className="w-1/2">
             <Tab.Panels>
               <Tab.Panel>
+                <div className="border border-slate-200">
                   <CodeEditor
                     value={squiggleString}
                     onChange={setSquiggleString}
@@ -220,9 +231,10 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
                     showGutter={true}
                     height={height - 1}
                   />
+                </div>
               </Tab.Panel>
+
               <Tab.Panel>
-                <>
                 <form className="space-y-6 p-3">
                   <InputItem label="Sample Count">
                     <>
@@ -250,6 +262,11 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
                       </p>
                     </>
                   </InputItem>
+                </form>
+              </Tab.Panel>
+
+              <Tab.Panel>
+                <form className="space-y-6 p-3">
                   <InputItem label="Chart Height (in Pixels)">
                     <input
                       type="number"
@@ -310,6 +327,10 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
                       </div>
                     </div>
                   </fieldset>
+                </form>
+              </Tab.Panel>
+
+              <Tab.Panel>
                 <InputItem label="Json Editor for imports">
                   <>
                     <JsonEditor
@@ -319,11 +340,17 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
                       showGutter={true}
                       height={100}
                     />
-                        {importsAreValid ? "Valid" : "Invalid"}
+                    {importsAreValid ? (
+                      "Valid"
+                    ) : (
+                      <div className="p-2">
+                        <ErrorBox heading="Invalid JSON">
+                          You must use valid json in this editor.
+                        </ErrorBox>
+                      </div>
+                    )}
                   </>
                 </InputItem>
-                  </form>
-                </>
               </Tab.Panel>
             </Tab.Panels>
           </div>