Canvas: Reuse Name component in node details
Change-Id: Ide8094b50f9ac019e7bada9a000100f9233133da
diff --git a/apps/canvas/front/src/components/node-name.tsx b/apps/canvas/front/src/components/node-name.tsx
new file mode 100644
index 0000000..7a68f83
--- /dev/null
+++ b/apps/canvas/front/src/components/node-name.tsx
@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+import { useStateStore } from "@/lib/state";
+import { AppNode } from "@/lib/state";
+import { Icon } from "./icon";
+import { Input } from "./ui/input";
+
+export function Name({
+ node,
+ disabled,
+ editing,
+}: {
+ node: AppNode;
+ disabled?: boolean;
+ editing?: boolean;
+}): React.ReactNode {
+ const { id, data } = node;
+ const store = useStateStore();
+ const [isEditing, setIsEditing] = useState(false);
+ useEffect(() => {
+ if (data.label === "") {
+ setIsEditing(true);
+ }
+ }, [data.label, disabled]);
+ return (
+ <div className="w-full flex flex-row gap-1 items-center">
+ <Icon type={node.type} />
+ {isEditing || editing ? (
+ <Input
+ placeholder="Name"
+ className="w-full"
+ value={data.label}
+ onChange={(e) => store.updateNodeData(id, { label: e.target.value })}
+ onBlur={() => {
+ if (data.label !== "") {
+ setIsEditing(false);
+ }
+ }}
+ disabled={disabled}
+ />
+ ) : (
+ <h3
+ className="w-full text-lg font-bold cursor-text select-none hover:outline-solid hover:outline-2 hover:outline-gray-200"
+ onClick={() => setIsEditing(true)}
+ >
+ {data.label}
+ </h3>
+ )}
+ </div>
+ );
+}