43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronRight } from "lucide-react";
|
|
import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
|
|
import { getNodePaletteItem } from "./sidebar/nodePaletteConfig";
|
|
|
|
export function FlowBreadcrumb() {
|
|
const { flowName, nodes, selectedNodes } = useFlowEditorStore();
|
|
|
|
const selectedNode =
|
|
selectedNodes.length === 1
|
|
? nodes.find((n) => n.id === selectedNodes[0])
|
|
: null;
|
|
|
|
const nodeInfo = selectedNode
|
|
? getNodePaletteItem(selectedNode.type as string)
|
|
: null;
|
|
|
|
return (
|
|
<div className="flex items-center gap-1.5 text-xs">
|
|
<span className="text-zinc-500">데이터 경로</span>
|
|
<ChevronRight className="h-3 w-3 text-zinc-600" />
|
|
<span className="font-medium text-zinc-300">{flowName || "새 플로우"}</span>
|
|
{selectedNode && (
|
|
<>
|
|
<ChevronRight className="h-3 w-3 text-zinc-600" />
|
|
<span className="flex items-center gap-1.5">
|
|
{nodeInfo && (
|
|
<span
|
|
className="inline-block h-2 w-2 rounded-full"
|
|
style={{ backgroundColor: nodeInfo.color }}
|
|
/>
|
|
)}
|
|
<span className="text-violet-400">
|
|
{(selectedNode.data as any)?.displayName || nodeInfo?.label || selectedNode.type}
|
|
</span>
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|