mirror of
https://github.com/johndoe6345789/AutoMetabuilder.git
synced 2026-04-26 14:54:57 +00:00
6e9ff896e7
- Created custom hooks: useWorkflowGraph, useWorkflowPlugins, usePluginSearch, useTabNavigation - Decomposed canvas logic into: useCanvasNodes, useCanvasEdges, useCanvasDragDrop - Built atomic node components: NodeHeader, NodeBody, NodePorts - Created canvas UI components: CanvasInfoPanel, CanvasHintPanel - Split builder into: LoadingState, ErrorState, WorkflowBuilderHeader, WorkflowBuilderTabs, WorkflowBuilderContent - Added React Flow for n8n-style visual canvas with drag-and-drop - All components now under 100 LOC following PROMPT.md guidelines Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
32 lines
891 B
TypeScript
32 lines
891 B
TypeScript
import { Box, Stack } from "@mui/material";
|
|
import { WorkflowGraph, WorkflowPluginMap } from "../../lib/types";
|
|
import WorkflowCanvas from "./WorkflowCanvas";
|
|
import WorkflowInspector from "./WorkflowInspector";
|
|
import WorkflowPalette from "./WorkflowPalette";
|
|
|
|
type WorkflowBuilderContentProps = {
|
|
selectedTab: number;
|
|
graph: WorkflowGraph;
|
|
plugins: WorkflowPluginMap;
|
|
t: (key: string, fallback?: string) => string;
|
|
};
|
|
|
|
export default function WorkflowBuilderContent({
|
|
selectedTab,
|
|
graph,
|
|
plugins,
|
|
t,
|
|
}: WorkflowBuilderContentProps) {
|
|
return (
|
|
<Stack direction="row" spacing={2}>
|
|
<Box sx={{ flex: 1 }}>
|
|
{selectedTab === 0 && <WorkflowCanvas graph={graph} plugins={plugins} t={t} />}
|
|
{selectedTab === 1 && <WorkflowInspector t={t} />}
|
|
</Box>
|
|
<Box sx={{ width: 300 }}>
|
|
<WorkflowPalette t={t} />
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|