src/Toolbar.tsx


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

import { useId } from 'preact/hooks';
import { NodeInfo } from './node.tsx';
import './Toolbar.css';

export interface ToolbarProps {
	nodes: Record<string, NodeInfo>;
	onNodeAdded?: (NodeInfo) => void;
}

export const Toolbar = ({ nodes, onNodeAdded = _ => {} }: ToolbarProps) => {
	const id = useId();
	return (
		<div class="__Toolbar">
			<menu>
				<li><button>Edit</button></li>
				<li><button>Select</button></li>
				<li>
					<menu id={id} class="addMenu" popover="auto">
						{Object.entries(nodes).map(([name, node]) => (
							<li><button onClick={() => onNodeAdded(node)}>{name}</button></li>
						))}
					</menu>
					<button popoverTarget={id}>Add</button>
				</li>
			</menu>
			<h1>Sample Project</h1>
			<div></div>
		</div>
	);
};