File size: 1,324 Bytes
81fc505 09e6cab 81fc505 09e6cab 81fc505 09e6cab 81fc505 09e6cab 81fc505 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | import { Link } from "react-router-dom";
import { useDroppable } from "@dnd-kit/core";
function TreeNode({ node, currentCardId, depth, onNavigate }) {
const { isOver, setNodeRef } = useDroppable({
id: `card-${node._id}`,
data: {
type: "card",
cardId: node._id
}
});
return (
<li ref={setNodeRef}>
<Link
className={`tree-link ${currentCardId === node._id ? "active" : ""} ${isOver ? "drop-target" : ""}`}
style={{ paddingLeft: `${depth * 16 + 12}px` }}
to={`/app/${node._id}`}
onClick={onNavigate}
>
{node.title}
</Link>
{node.children.length > 0 && (
<ul className="tree-list">
{node.children.map((child) => (
<TreeNode
key={child._id}
node={child}
currentCardId={currentCardId}
depth={depth + 1}
onNavigate={onNavigate}
/>
))}
</ul>
)}
</li>
);
}
export function SidebarTree({ roots, currentCardId, onNavigate }) {
return (
<ul className="tree-list">
{roots.map((root) => (
<TreeNode
key={root._id}
node={root}
currentCardId={currentCardId}
depth={0}
onNavigate={onNavigate}
/>
))}
</ul>
);
}
|