Feat: Initialize the data pipeline canvas. #9869 (#9870)

### What problem does this PR solve?
Feat: Initialize the data pipeline canvas. #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/data-flow/canvas/node/node-wrapper.tsx

@@ -0,0 +1,18 @@
+import { cn } from '@/lib/utils';
+import { HTMLAttributes } from 'react';
+
+type IProps = HTMLAttributes<HTMLDivElement> & { selected?: boolean };
+
+export function NodeWrapper({ children, className, selected }: IProps) {
+  return (
+    <section
+      className={cn(
+        'bg-text-title-invert p-2.5 rounded-sm w-[200px] text-xs',
+        { 'border border-accent-primary': selected },
+        className,
+      )}
+    >
+      {children}
+    </section>
+  );
+}