Add basic toolbar

1 files changed, 30 insertions, 0 deletions

diff --git a/src/Toolbar.tsx b/src/Toolbar.tsx
new file mode 100644
index 0000000..62c79fe
--- /dev/null
+++ b/src/Toolbar.tsx
@@ -0,0 +1,30 @@
+import { useId } from 'preact/hooks';
+import { NodeInfo } from './node.tsx';
+import styles from './Toolbar.module.css';
+
+export interface ToolbarProps {
+	nodes: Record<string, NodeInfo>;
+	onNodeAdded?: (NodeInfo) => void;
+}
+
+export const Toolbar = ({ nodes, onNodeAdded = _ => {} }: ToolbarProps) => {
+	const id = useId();
+	return (
+		<div class={styles.toolbar}>
+			<menu>
+				<li><button>Edit</button></li>
+				<li><button>Select</button></li>
+				<li>
+					<menu id={id} class={styles.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>My Project</h1>
+			<div></div>
+		</div>
+	);
+};
\ No newline at end of file