feat: Add buildTrigger ShadTooltip

This commit is contained in:
Igor Carvalho 2023-06-17 12:05:58 -03:00
commit 1c55a722fe
3 changed files with 28 additions and 21 deletions

View file

@ -8,6 +8,7 @@ import { useSSE } from "../../../contexts/SSEContext";
import { typesContext } from "../../../contexts/typesContext";
import { alertContext } from "../../../contexts/alertContext";
import { postBuildInit } from "../../../controllers/API";
import ShadTooltip from "../../ShadTooltipComponent";
export default function BuildTrigger({
open,
@ -135,24 +136,30 @@ export default function BuildTrigger({
leaveTo="translate-y-96"
>
<div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
<div
className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md hover:shadow-sm shadow-[#00000063] hover:shadow-[#00000063]
bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
onClick={() => {
handleBuild(flow);
}}
<ShadTooltip
delayDuration={500}
content="Build Flow"
side="left"
>
<button>
<div className="flex gap-3 items-center">
{isBuilding ? (
// Render your loading animation here when isBuilding is true
<Loading strokeWidth={1.5} style={{ color: "white" }} />
) : (
<Zap className="sh-6 w-6 fill-[#dc735b] stroke-1 stroke-[#dc735b]"/>
)}
</div>
</button>
</div>
<div
className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md hover:shadow-sm shadow-[#00000063] hover:shadow-[#00000063]
bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
onClick={() => {
handleBuild(flow);
}}
>
<button>
<div className="flex gap-3 items-center">
{isBuilding ? (
// Render your loading animation here when isBuilding is true
<Loading strokeWidth={1.5} style={{ color: "#dc735b" }} />
) : (
<Zap className="sh-6 w-6 fill-[#dc735b] stroke-1 stroke-[#dc735b]"/>
)}
</div>
</button>
</div>
</ShadTooltip>
</div>
</Transition>
);

View file

@ -158,13 +158,13 @@ export default function ExtraSidebar() {
.map((t: string, k) => (
<ShadTooltip
content={t}
delayDuration={1500}
delayDuration={500}
side="right"
>
<div key={k} data-tooltip-id={t}>
<div
draggable
className={" cursor-grab border-l-8 rounded-l-md"}
className={"cursor-grab border-l-8 rounded-l-md"}
style={{
borderLeftColor:
nodeColors[d] ?? nodeColors.unknown,

View file

@ -1,5 +1,5 @@
import { useContext, useEffect } from "react";
import { COLUMN_DIV_STYLE, NAV_DISPLAY_STYLE } from "../../constants";
import { COLUMN_DIV_STYLE, NAV_DISPLAY_STYLE, BUTTON_DIV_STYLE } from "../../constants";
import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
import { TabsContext } from "../../contexts/tabsContext";
@ -20,7 +20,7 @@ import { COLUMN_DIV_STYLE, NAV_DISPLAY_STYLE } from "../../constants";
<Home className=" w-6 " />
My Projects
</span>
<div className="hi flex gap-2">
<div className={`${ BUTTON_DIV_STYLE }`}>
<Button
variant="primary"
onClick={() => {