77 lines
3.2 KiB
TypeScript
77 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
type ToolbarProps = {
|
|
onAddDialogue: () => void
|
|
onAddChoice: () => void
|
|
onAddVariable: () => void
|
|
onSave: () => void
|
|
onExport: () => void
|
|
onImport: () => void
|
|
onProjectSettings: () => void
|
|
}
|
|
|
|
export default function Toolbar({
|
|
onAddDialogue,
|
|
onAddChoice,
|
|
onAddVariable,
|
|
onSave,
|
|
onExport,
|
|
onImport,
|
|
onProjectSettings,
|
|
}: 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={onProjectSettings}
|
|
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"
|
|
>
|
|
Project Settings
|
|
</button>
|
|
<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>
|
|
)
|
|
}
|