honest knoll
`/* eslint-disable react/prop-types */
import { memo } from 'react';
import { Handle, Position } from 'reactflow';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
const CustomNode = memo(({ data }) => {
return (
<div className="custom-node p-4 rounded-md bg-white border border-gray-200 shadow-md">
<Handle type="target" position={Position.Top} />
<div className="node-content">
<h3 className="text-lg font-bold mb-3 text-gray-800">{data.category}</h3>
{data.skills.map((skill) => (
<div key={skill.id} className="skill-row flex items-center justify-between mb-2">
<span className="skill-label text-sm text-gray-600 mr-4">{skill.label}</span>
<RadioGroup defaultValue="uncompleted" className="flex items-center space-x-2">
<div className="flex items-center">
<RadioGroupItem
value="completed"
id={${skill.id}-completed}
className="w-4 h-4 border-2 border-blue-500"
/>
<label htmlFor={${skill.id}-completed} className="ml-1 text-xs text-gray-500">Done</label>
</div>
<div className="flex items-center">
<RadioGroupItem
value="uncompleted"
id={${skill.id}-uncompleted}
className="w-4 h-4 border-2 border-gray-300"
/>
<label htmlFor={${skill.id}-uncompleted} className="ml-1 text-xs text-gray-500">Todo</label>
</div>
</RadioGroup>
</div>
))}
</div>
<Handle type="source" position={Position.Bottom} />
</div>
);
});
CustomNode.displayName = 'CustomNode';
export default CustomNode;`
above I define a custom node. I don't really like the way the node is styled though. Is there a way we can see what styling is used for the default node?
normal jetty
arctic umbra