49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
|
|
import { useContext } from "react";
|
|
import { TabsContext } from "../../../../contexts/tabsContext";
|
|
|
|
export default function TabComponent({ selected, flow, onClick }) {
|
|
const { removeFlow } = useContext(TabsContext);
|
|
return (
|
|
<>
|
|
{flow ? (
|
|
!selected ? (
|
|
<div
|
|
className="flex justify-between select-none w-36 items-center px-4 my-2 mt-3 border-x border-gray-300 -ml-px"
|
|
onClick={onClick}
|
|
>
|
|
{flow.name}
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
removeFlow(flow.id);
|
|
}}
|
|
>
|
|
<XMarkIcon className="h-4" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white flex select-none justify-between w-36 items-center pt-3 border border-b-0 border-gray-300 px-4 py-2 rounded-t-xl -ml-px">
|
|
{flow.name}
|
|
<button
|
|
onClick={() => {
|
|
removeFlow(flow.id);
|
|
}}
|
|
>
|
|
<XMarkIcon className="h-4" />
|
|
</button>
|
|
</div>
|
|
)
|
|
) : (
|
|
<div className="h-full py-2 pt-3 flex justify-center items-center">
|
|
<button
|
|
className="px-3 h-full border-gray-300 -ml-px"
|
|
onClick={onClick}
|
|
>
|
|
<PlusIcon className="h-5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|