diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index bf98ccb7..ab06159a 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/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
= ({
};
// 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: ,
+ cog: ,
+ squareBar: ,
+ dollar: ,
+ }[iconName]);
+
return (
{({ selected }) => (
@@ -178,11 +190,7 @@ let SquigglePlayground: FC = ({
: ""
)}
>
- {key === "Code" ? (
-
- ) : (
-
- )}
+ {icon(selected)}
= ({
return (
-
-
-
- {tab("Code")}
- {tab("Settings")}
-
+
+
+
+ {tab("Code", "code")}
+ {tab("Sampling Settings", "cog")}
+ {tab("View Settings", "squareBar")}
+ {tab("Input Variables", "dollar")}
+
-
+
+
+
+
- <>
-
+
+
+
+
+
+
+
+ <>
+
+ {importsAreValid ? (
+ "Valid"
+ ) : (
+
+
+ You must use valid json in this editor.
+
+
+ )}
+ >
+