40 lines
1.0 KiB
JavaScript
40 lines
1.0 KiB
JavaScript
import { Handle, Position } from 'reactflow';
|
|
|
|
function CustomNode({ data }) {
|
|
const icon = data.icon || 'https://s3.dvirlabs.com/lab-icons/default.svg';
|
|
|
|
return (
|
|
<div style={{
|
|
background: 'transparent',
|
|
border: '2px solid #1976d2',
|
|
borderRadius: 6,
|
|
padding: 10,
|
|
textAlign: 'center',
|
|
width: 80,
|
|
height: 40,
|
|
boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
|
|
position: 'relative',
|
|
}}>
|
|
{/* Handles - חובה */}
|
|
<Handle type="target" position={Position.Top} />
|
|
<Handle type="source" position={Position.Bottom} />
|
|
<Handle type="source" position={Position.Right} />
|
|
<Handle type="source" position={Position.Left} />
|
|
|
|
{/* Icon and label */}
|
|
|
|
<img
|
|
src={icon}
|
|
alt={data.label}
|
|
onError={(e) => {
|
|
e.target.src = 'https://s3.dvirlabs.com/lab-icons/default.svg';
|
|
}}
|
|
style={{ width: 40, height: 40, marginBottom: 6 }}
|
|
/>
|
|
<div style={{ fontWeight: 'bold' }}>{data.label}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CustomNode;
|