Formatted, converted tab to component

This commit is contained in:
Ozzie Gooen 2022-06-01 20:13:19 -07:00
parent 88adccf2e7
commit 800a832a06
7 changed files with 40 additions and 20 deletions

View File

@ -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" />
}
/>
);

View File

@ -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>
);

View File

@ -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">

View File

@ -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}

View File

@ -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>
);
};

View File

@ -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" }}>

View File

@ -3,7 +3,5 @@ module.exports = {
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
],
plugins: [require("@tailwindcss/forms")],
};