diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index a66d33b9..bf98ccb7 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -11,6 +11,7 @@ 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 { Fragment } from "react";
interface ShowBoxProps {
height: number;
@@ -104,50 +105,6 @@ function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
-function Example() {
- return (
-
-
-
- {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
-
-
-
-
- );
-}
-
let SquigglePlayground: FC = ({
initialSquiggleString = "",
height = 500,
@@ -197,47 +154,60 @@ let SquigglePlayground: FC = ({
}
};
- let tab = (key, icon) => (
-
- classNames(
- "whitespace-nowrap pb-1 pt-2 px-1 border-b-2 font-medium text-sm focus-within:outline-none group inline-flex items-center",
- selected
- ? "border-slate-400 text-gray-500"
- : "border-transparent text-gray-400 hover:text-gray-600 hover:border-slate-300"
- )
- }
- >
- {icon}
- {key}
-
- );
+ // className="text-gray-400 group-hover:text-gray-500 -ml-0.5 mr-2 h-4 w-4"
+ let tab = (key) => {
+ 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"
+ );
+ return (
+
+ {({ selected }) => (
+
+ )}
+
+ );
+ };
return (
-
-
-
-
-
-
- {tab(
- "Code",
-
- )}
- {tab(
- "Settings",
-
- )}
-
-
-
+
+
+
+
+ {tab("Code")}
+ {tab("Settings")}
+
@@ -374,8 +344,8 @@ let SquigglePlayground: FC
= ({
-
-
+
+
);
};
export default SquigglePlayground;