quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added simple pill for code-settings toggle

Browse Source
This commit is contained in:
Ozzie Gooen 2022-05-30 14:09:59 -07:00
parent 6b80118e7e
commit d6bc942265
1 changed files with 55 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
packages/components/src/components/SquigglePlayground.tsx
View File

@ -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 (
<div>
<div className="sm:hidden">
<label htmlFor="tabs" className="sr-only">
Select a tab
</label>
{/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
<select
id="tabs"
name="tabs"
className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
defaultValue={"Editor"}
>
{tabs.map((tab) => (
<option key={tab.name}>{tab.name}</option>
))}
</select>
</div>
<div className="hidden sm:block">
<div className="border-b border-gray-200">
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
{tabs.map((tab) => (
<a
key={tab.name}
href={tab.href}
className={classNames(
tab.current
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
)}
aria-current={tab.current ? "page" : undefined}
>
{tab.name}
</a>
))}
</nav>
</div>
</div>
</div>
);
}
let SquigglePlayground: FC<PlaygroundProps> = ({
initialSquiggleString = "",
height = 500,
@ -197,48 +154,61 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
}
};
let tab = (key, icon) => (
<Tab
key={key}
className={({ selected }) =>
// 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(
"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"
)
}
"-ml-0.5 mr-2 h-4 w-4 ",
isSelected ? "text-teal-500" : "text-gray-500 group-hover:text-gray-900"
);
return (
<Tab key={key} as={Fragment}>
{({ selected }) => (
<button
className={classNames(
"flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100 ",
selected ? "" : ""
)}
>
{icon}
<span>{key}</span>
<span
className={classNames(
"p-1 pl-2.5 pr-3.5 rounded-md flex items-center text-sm font-medium",
selected
? "bg-white shadow-sm ring-1 ring-black ring-opacity-5"
: ""
)}
>
{key === "Code" ? (
<CodeIcon className={iconStyle(selected)} />
) : (
<CogIcon className={iconStyle(selected)} />
)}
<span
className={classNames(
"",
selected
? "text-gray-900"
: "text-gray-600 group-hover:text-gray-900"
)}
>
{key}
</span>
</span>
</button>
)}
</Tab>
);
};
return (
<div className="border border-slate-300 rounded-sm">
<Tab.Group>
<div className="bg-slate-200 rounded-tl-sm rounded-tr-sm">
<div className="pb-3 pl-3">
<div className="border-b border-gray-200">
<Tab.List className="-mb-px flex space-x-4">
{tab(
"Code",
<CodeIcon
className="text-gray-400 group-hover:text-gray-500 -ml-0.5 mr-2 h-4 w-4"
aria-hidden="true"
/>
)}
{tab(
"Settings",
<CogIcon
className="text-gray-400 group-hover:text-gray-500 -ml-0.5 mr-2 h-4 w-4"
aria-hidden="true"
/>
)}
<div className="border border-slate-300 rounded-sm flex-col flex">
<div className="border-b border-slate-300 rounded-tl-sm rounded-tr-sm p-2">
<Tab.List className="p-0.5 rounded-lg bg-slate-200 hover:bg-slate-300 inline-flex">
{tab("Code")}
{tab("Settings")}
</Tab.List>
</div>
</div>
</div>
<div className="flex" style={{ height: height + "px" }}>
<div className="w-1/2">
<Tab.Panels>
@ -374,8 +344,8 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
</div>
</div>
</div>
</Tab.Group>
</div>
</Tab.Group>
);
};
export default SquigglePlayground;