feat: [US-019] - Editor toolbar

Add toolbar component with buttons for adding nodes (Dialogue, Choice, Variable) and managing projects (Save, Export, Import). Buttons are styled with TailwindCSS and wired to placeholder handlers. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-21 12:45:11 -03:00
parent e530606cef
commit 9aa2aa48f0
2 changed files with 116 additions and 12 deletions
@@ -0,0 +1,68 @@
+'use client'
+
+type ToolbarProps = {
+  onAddDialogue: () => void
+  onAddChoice: () => void
+  onAddVariable: () => void
+  onSave: () => void
+  onExport: () => void
+  onImport: () => void
+}
+
+export default function Toolbar({
+  onAddDialogue,
+  onAddChoice,
+  onAddVariable,
+  onSave,
+  onExport,
+  onImport,
+}: ToolbarProps) {
+  return (
+    <div className="flex items-center justify-between border-b border-zinc-200 bg-zinc-50 px-4 py-2 dark:border-zinc-700 dark:bg-zinc-800">
+      <div className="flex items-center gap-2">
+        <span className="mr-2 text-sm font-medium text-zinc-500 dark:text-zinc-400">
+          Add Node:
+        </span>
+        <button
+          onClick={onAddDialogue}
+          className="rounded bg-blue-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800"
+        >
+          Dialogue
+        </button>
+        <button
+          onClick={onAddChoice}
+          className="rounded bg-green-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800"
+        >
+          Choice
+        </button>
+        <button
+          onClick={onAddVariable}
+          className="rounded bg-orange-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800"
+        >
+          Variable
+        </button>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onSave}
+          className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
+        >
+          Save
+        </button>
+        <button
+          onClick={onExport}
+          className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
+        >
+          Export
+        </button>
+        <button
+          onClick={onImport}
+          className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
+        >
+          Import
+        </button>
+      </div>
+    </div>
+  )
+}