jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Tabs styled and function added

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-22 23:05:45 -03:00
commit 1f9fe951fe
4 changed files with 30 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

43
space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
View file

@ -1,24 +1,31 @@
import { XMarkIcon } from "@heroicons/react/24/solid";
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
import { useContext } from "react";
import { TabsContext } from "../../../../contexts/tabsContext";
import { classNames } from "../../../../utils";
export default function TabComponent({ children, selected, id, onClick}) {
export default function TabComponent({ selected, flow, id, onClick}) {
const { removeFlow, flows } = useContext(TabsContext);
return (
<div onClick={onClick}
className={classNames(
selected ? " shadow-lg" : "bg-gray-300",
"flex border-t border-l border-r border-black rounded-t-md shadow-sm cursor-pointer"
)}
>
{children}
{flows.length > 1 && (
<XMarkIcon
className="w-5 hover:text-red-500"
onClick={() => removeFlow(id)}
></XMarkIcon>
)}
</div>
);
}
<>
{flow ? (
selected ? (
<button
className="px-4 my-2 mt-3 border-l border-gray-300 -ml-px"
onClick={onClick}
>
{flow.name}
</button>
) : (
<div className="bg-white pt-3 pointer-events-none border border-b-0 border-gray-300 px-4 py-2 rounded-t-xl">
{flow.name}
</div>
)
) : (
<div className="h-full py-2 pt-3 flex justify-center items-center">
<button className="px-3 h-full border-l border-gray-300 -ml-px">
<PlusIcon className="h-5" />
</button>
</div>
)}
</>
)}