feat: Add generic node tailwind constants classes
This commit is contained in:
Igor Carvalho
parent
53cfec6321
commit
fa628a04fd
2 changed files with 75 additions and 22 deletions
|
|
@ -82,30 +82,30 @@ export default function GenericNode({
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
selected ? "border border-ring" : "border",
|
selected ? "border border-ring" : "border",
|
||||||
"prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-background"
|
"generic-node-div"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 ">
|
<div className="generic-node-div-title">
|
||||||
<div className="flex w-full items-center truncate">
|
<div className="generic-node-title-arrangement">
|
||||||
<Icon
|
<Icon
|
||||||
strokeWidth={1.5}
|
strokeWidth={1.5}
|
||||||
className="h-10 w-10 rounded p-1"
|
className="generic-node-icon"
|
||||||
style={{
|
style={{
|
||||||
color: nodeColors[types[data.type]] ?? nodeColors.unknown,
|
color: nodeColors[types[data.type]] ?? nodeColors.unknown,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div className="ml-2 truncate">
|
<div className="generic-node-tooltip-div">
|
||||||
<ShadTooltip
|
<ShadTooltip
|
||||||
delayDuration={1500}
|
delayDuration={1500}
|
||||||
content={data.node.display_name}
|
content={data.node.display_name}
|
||||||
>
|
>
|
||||||
<div className="ml-2 truncate text-primary">
|
<div className="generic-node-tooltip-div text-primary">
|
||||||
{data.node.display_name}
|
{data.node.display_name}
|
||||||
</div>
|
</div>
|
||||||
</ShadTooltip>
|
</ShadTooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-3">
|
<div className="round-button-div">
|
||||||
<button
|
<button
|
||||||
className="relative"
|
className="relative"
|
||||||
onClick={(event) => {
|
onClick={(event) => {
|
||||||
|
|
@ -114,14 +114,14 @@ export default function GenericNode({
|
||||||
}}
|
}}
|
||||||
></button>
|
></button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-3">
|
<div className="round-button-div">
|
||||||
<div>
|
<div>
|
||||||
<Tooltip
|
<Tooltip
|
||||||
title={
|
title={
|
||||||
!validationStatus ? (
|
!validationStatus ? (
|
||||||
"Validating..."
|
"Validating..."
|
||||||
) : (
|
) : (
|
||||||
<div className="max-h-96 overflow-auto">
|
<div className="generic-node-validation-div">
|
||||||
{validationStatus.params ||
|
{validationStatus.params ||
|
||||||
""
|
""
|
||||||
.split("\n")
|
.split("\n")
|
||||||
|
|
@ -130,29 +130,29 @@ export default function GenericNode({
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="relative top-[3px] h-5 w-5">
|
<div className="generic-node-status-position">
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
validationStatus && validationStatus.valid
|
validationStatus && validationStatus.valid
|
||||||
? "h-4 w-4 rounded-full bg-status-green opacity-100"
|
? "green-status"
|
||||||
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
|
: "status-build-animation",
|
||||||
"absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
|
"status-div"
|
||||||
)}
|
)}
|
||||||
></div>
|
></div>
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
validationStatus && !validationStatus.valid
|
validationStatus && !validationStatus.valid
|
||||||
? "h-4 w-4 rounded-full bg-status-red opacity-100"
|
? "red-status"
|
||||||
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
|
: "status-build-animation",
|
||||||
"absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
|
"status-div"
|
||||||
)}
|
)}
|
||||||
></div>
|
></div>
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
!validationStatus || isBuilding
|
!validationStatus || isBuilding
|
||||||
? "h-4 w-4 rounded-full bg-status-yellow opacity-100"
|
? "yellow-status"
|
||||||
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
|
: "status-build-animation",
|
||||||
"absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
|
"status-div"
|
||||||
)}
|
)}
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -161,8 +161,8 @@ export default function GenericNode({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="h-full w-full py-5 text-foreground">
|
<div className="generic-node-desc">
|
||||||
<div className="w-full px-5 pb-3 text-sm text-muted-foreground">
|
<div className="generic-node-desc-text">
|
||||||
{data.node.description}
|
{data.node.description}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -221,7 +221,7 @@ export default function GenericNode({
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
Object.keys(data.node.template).length < 1 ? "hidden" : "",
|
Object.keys(data.node.template).length < 1 ? "hidden" : "",
|
||||||
"flex w-full justify-center"
|
"flex-max-width justify-center"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{" "}
|
{" "}
|
||||||
|
|
|
||||||
|
|
@ -298,4 +298,57 @@ The cursor: default; property value restores the browser's default cursor style
|
||||||
.community-pages-flows-panel {
|
.community-pages-flows-panel {
|
||||||
@apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
|
@apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
|
||||||
}
|
}
|
||||||
|
.generic-node-div {
|
||||||
|
@apply relative flex w-96 flex-col justify-center rounded-lg bg-background
|
||||||
|
}
|
||||||
|
.generic-node-div-title {
|
||||||
|
@apply flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4
|
||||||
|
}
|
||||||
|
.generic-node-title-arrangement {
|
||||||
|
@apply flex-max-width items-center truncate
|
||||||
|
}
|
||||||
|
.generic-node-icon {
|
||||||
|
@apply h-10 w-10 rounded p-1
|
||||||
|
}
|
||||||
|
.generic-node-tooltip-div {
|
||||||
|
@apply ml-2 truncate
|
||||||
|
}
|
||||||
|
.generic-node-validation-div {
|
||||||
|
@apply max-h-96 overflow-auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.generic-node-status-position {
|
||||||
|
@apply relative top-[3px] h-5 w-5
|
||||||
|
}
|
||||||
|
|
||||||
|
.generic-node-status-animation {
|
||||||
|
@apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0
|
||||||
|
}
|
||||||
|
.generic-node-status {
|
||||||
|
@apply h-4 w-4 rounded-full opacity-100
|
||||||
|
}
|
||||||
|
.green-status {
|
||||||
|
@apply generic-node-status bg-status-green
|
||||||
|
}
|
||||||
|
.red-status {
|
||||||
|
@apply generic-node-status bg-status-red
|
||||||
|
}
|
||||||
|
.yellow-status {
|
||||||
|
@apply generic-node-status bg-status-yellow
|
||||||
|
}
|
||||||
|
.status-build-animation {
|
||||||
|
@apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0
|
||||||
|
}
|
||||||
|
.status-div {
|
||||||
|
@apply absolute w-4 duration-200 ease-in-out
|
||||||
|
}
|
||||||
|
.status-div:hover {
|
||||||
|
@apply hover:text-accent-foreground hover:transition-all
|
||||||
|
}
|
||||||
|
.generic-node-desc {
|
||||||
|
@apply h-full w-full py-5 text-foreground
|
||||||
|
}
|
||||||
|
.generic-node-desc-text {
|
||||||
|
@apply w-full px-5 pb-3 text-sm text-muted-foreground
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue