Formatted, converted tab to component
This commit is contained in:
parent
88adccf2e7
commit
800a832a06
|
@ -1,5 +1,9 @@
|
|||
import * as React from "react";
|
||||
import { XCircleIcon, InformationCircleIcon, CheckCircleIcon } from "@heroicons/react/solid";
|
||||
import {
|
||||
XCircleIcon,
|
||||
InformationCircleIcon,
|
||||
CheckCircleIcon,
|
||||
} from "@heroicons/react/solid";
|
||||
|
||||
export const Alert: React.FC<{
|
||||
heading: string;
|
||||
|
@ -53,7 +57,12 @@ export const MessageAlert: React.FC<{
|
|||
backgroundColor="bg-slate-100"
|
||||
headingColor="text-slate-700"
|
||||
bodyColor="text-slate-700"
|
||||
icon={<InformationCircleIcon className="h-5 w-5 text-slate-400" aria-hidden="true" />}
|
||||
icon={
|
||||
<InformationCircleIcon
|
||||
className="h-5 w-5 text-slate-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
|
@ -67,6 +76,8 @@ export const SuccessAlert: React.FC<{
|
|||
backgroundColor="bg-green-50"
|
||||
headingColor="text-green-800"
|
||||
bodyColor="text-green-700"
|
||||
icon={<CheckCircleIcon className="h-5 w-5 text-green-400" aria-hidden="true" />}
|
||||
icon={
|
||||
<CheckCircleIcon className="h-5 w-5 text-green-400" aria-hidden="true" />
|
||||
}
|
||||
/>
|
||||
);
|
||||
);
|
||||
|
|
|
@ -173,12 +173,12 @@ const SummaryTable: React.FC<SummaryTableProps> = ({
|
|||
let TableHeadCell: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => (
|
||||
<th className="border border-slate-200 bg-slate-50 pt-1 pb-1 pl-2 pr-2 text-slate-500 font-semibold">
|
||||
<th className="border border-slate-200 bg-slate-50 py-1 px-2 text-slate-500 font-semibold">
|
||||
{children}
|
||||
</th>
|
||||
);
|
||||
let Cell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
||||
<td className="border border-slate-200 pt-1 pb-1 pl-2 pr-2 text-slate-900 ">
|
||||
<td className="border border-slate-200 py-1 px-2 text-slate-900 ">
|
||||
{children}
|
||||
</td>
|
||||
);
|
||||
|
|
|
@ -65,7 +65,9 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
|
|||
/>
|
||||
);
|
||||
case "Error":
|
||||
return <ErrorAlert heading="Error">The function failed to be run</ErrorAlert>;
|
||||
return (
|
||||
<ErrorAlert heading="Error">The function failed to be run</ErrorAlert>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<MessageAlert heading="Function Display Not Supported">
|
||||
|
|
|
@ -158,10 +158,10 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
|
|||
<VariableBox heading="Array" showTypes={showTypes}>
|
||||
{expression.value.map((r, i) => (
|
||||
<div key={i} className="flex flex-row pt-1">
|
||||
<div className="flex-none bg-slate-100 rounded-sm pl-1" style={{"paddingRight": "0.25rem"}}>
|
||||
<div className="flex-none bg-slate-100 rounded-sm px-1">
|
||||
<h3 className="text-slate-400 font-mono">{i}</h3>
|
||||
</div>
|
||||
<div className="pl-2 pr-2 mb-2 grow ">
|
||||
<div className="px-2 mb-2 grow ">
|
||||
<SquiggleItem
|
||||
key={i}
|
||||
expression={r}
|
||||
|
|
|
@ -181,7 +181,11 @@ export let SquigglePartial: React.FC<SquigglePartialProps> = ({
|
|||
height={20}
|
||||
/>
|
||||
</div>
|
||||
{error !== null ? <ErrorAlert heading="Error">{error}</ErrorAlert> : <></>}
|
||||
{error !== null ? (
|
||||
<ErrorAlert heading="Error">{error}</ErrorAlert>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -104,7 +104,12 @@ function classNames(...classes: string[]) {
|
|||
return classes.filter(Boolean).join(" ");
|
||||
}
|
||||
|
||||
let tab = (key: string, iconName: string) => {
|
||||
type StyledTabProps = {
|
||||
name: string;
|
||||
iconName: string;
|
||||
};
|
||||
|
||||
const StyledTab: React.FC<StyledTabProps> = ({ name, iconName }) => {
|
||||
let iconStyle = (isSelected: boolean) =>
|
||||
classNames(
|
||||
"-ml-0.5 mr-2 h-4 w-4 ",
|
||||
|
@ -120,7 +125,7 @@ let tab = (key: string, iconName: string) => {
|
|||
}[iconName]);
|
||||
|
||||
return (
|
||||
<Tab key={key} as={Fragment}>
|
||||
<Tab key={name} as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className="flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100 ">
|
||||
<span
|
||||
|
@ -139,7 +144,7 @@ let tab = (key: string, iconName: string) => {
|
|||
: "text-gray-600 group-hover:text-gray-900"
|
||||
}
|
||||
>
|
||||
{key}
|
||||
{name}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
@ -368,10 +373,10 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
<div className=" flex-col flex">
|
||||
<div className="pb-4">
|
||||
<Tab.List className="p-0.5 rounded-md bg-slate-100 hover:bg-slate-200 inline-flex">
|
||||
{tab("Code", "code")}
|
||||
{tab("Sampling Settings", "cog")}
|
||||
{tab("View Settings", "squareBar")}
|
||||
{tab("Input Variables", "dollar")}
|
||||
<StyledTab name="Code" iconName="code" />
|
||||
<StyledTab name="Sampling Settings" iconName="cog" />
|
||||
<StyledTab name="View Settings" iconName="squareBar" />
|
||||
<StyledTab name="Input Variables" iconName="dollar" />
|
||||
</Tab.List>
|
||||
</div>
|
||||
<div className="flex" style={{ height: height + "px" }}>
|
||||
|
|
|
@ -3,7 +3,5 @@ module.exports = {
|
|||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
],
|
||||
plugins: [require("@tailwindcss/forms")],
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue
Block a user