| 80 | } |
| 81 | |
| 82 | function Tree({ tree, level = 1, activeItem }: TreeProps) { |
| 83 | return tree?.items?.length && level < 3 ? ( |
| 84 | <ul className={cn("m-0 list-none", { "pl-4": level !== 1 })}> |
| 85 | {tree.items.map((item, index) => { |
| 86 | return ( |
| 87 | <li key={index} className={cn("mt-0 pt-2")}> |
| 88 | <a |
| 89 | href={item.url} |
| 90 | className={cn( |
| 91 | "inline-block no-underline", |
| 92 | item.url === `#${activeItem}` |
| 93 | ? "text-state-900 font-medium" |
| 94 | : "text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400", |
| 95 | )} |
| 96 | > |
| 97 | {item.title} |
| 98 | </a> |
| 99 | {item.items?.length ? ( |
| 100 | <Tree tree={item} level={level + 1} activeItem={activeItem} /> |
| 101 | ) : null} |
| 102 | </li> |
| 103 | ); |
| 104 | })} |
| 105 | </ul> |
| 106 | ) : null; |
| 107 | } |