+ );
+};
+
+export default Sidebar;
\ No newline at end of file
diff --git a/stepwise-studio/components/step-node.tsx b/stepwise-studio/components/step-node.tsx
new file mode 100644
index 0000000..19898f0
--- /dev/null
+++ b/stepwise-studio/components/step-node.tsx
@@ -0,0 +1,119 @@
+import { StepDTO } from '@/stepwise-client';
+import React, { useEffect, useState } from 'react';
+import { Handle, Position, NodeProps } from 'reactflow';
+import { Button, buttonVariants } from './ui/button';
+import { cn } from '@/lib/utils';
+import { CircleUserRound, Play, RotateCcw, SquareFunction } from 'lucide-react';
+import Divider from './divider';
+
+export interface StepNodeProps {
+ data: StepDTO;
+ onRunClick: (step: StepDTO) => void;
+}
+const StepNode: React.FC> = (prop) => {
+ const [data, setData] = useState(prop.data.data);
+
+ useEffect(() => {
+ setData(prop.data.data);
+ }, []);
+
+ return (
+
+ {/* settings bar */}
+ {/* appear when hover */}
+
+
+
+
+
+ {/* set up source handles */}
+ {/* the source handles will be put to the left */}
+ {/* and the y will start from 50, and incremented by 20 */}
+ {
+ data.dependencies && data.dependencies.map((dep, index) => (
+
+ ))
+ }
+ {/* set up target handles */}
+ {/* the target handles will be put to the right */}
+ {/* and the y will start from 30 */}
+ {
+
+ }
+ {data.name && (
+
-
-# StepWise
-