From 9fb6fa12590609a4cd25d2e212166c61e1c23580 Mon Sep 17 00:00:00 2001
From: Sam Nystrom <sam@samnystrom.dev>
Date: Fri, 8 Mar 2024 08:09:18 +0000
Subject: Add basic toolbar

---
 src/Toolbar.tsx | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/Toolbar.tsx

(limited to 'src/Toolbar.tsx')

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
-- 
cgit v1.2.3