78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import { presets } from './presets'
|
|
|
|
interface FlowToolbarProps {
|
|
onAddNode: (type: 'source' | 'pipe' | 'sink') => void
|
|
onLoadPreset: (index: number) => void
|
|
onReset: () => void
|
|
isPlaying: boolean
|
|
onTogglePlay: () => void
|
|
}
|
|
|
|
export default function FlowToolbar({
|
|
onAddNode,
|
|
onLoadPreset,
|
|
onReset,
|
|
isPlaying,
|
|
onTogglePlay,
|
|
}: FlowToolbarProps) {
|
|
return (
|
|
<div className="absolute top-4 left-4 z-10 flex flex-wrap gap-2">
|
|
{/* Add nodes */}
|
|
<div className="flex gap-1 bg-nothing/80 backdrop-blur-sm rounded-lg p-1 border border-zen/10">
|
|
<button
|
|
onClick={() => onAddNode('source')}
|
|
className="px-3 py-1.5 text-xs text-flow-green/70 hover:bg-flow-green/10 rounded transition-colors"
|
|
title="Add Source"
|
|
>
|
|
+ Source
|
|
</button>
|
|
<button
|
|
onClick={() => onAddNode('pipe')}
|
|
className="px-3 py-1.5 text-xs text-zen/50 hover:bg-zen/10 rounded transition-colors"
|
|
title="Add Pipe"
|
|
>
|
|
+ Pipe
|
|
</button>
|
|
<button
|
|
onClick={() => onAddNode('sink')}
|
|
className="px-3 py-1.5 text-xs text-zen/40 hover:bg-zen/10 rounded transition-colors"
|
|
title="Add Sink"
|
|
>
|
|
+ Sink
|
|
</button>
|
|
</div>
|
|
|
|
{/* Presets */}
|
|
<div className="flex gap-1 bg-nothing/80 backdrop-blur-sm rounded-lg p-1 border border-zen/10">
|
|
{presets.map((preset, i) => (
|
|
<button
|
|
key={preset.name}
|
|
onClick={() => onLoadPreset(i)}
|
|
className="px-3 py-1.5 text-xs text-zen/50 hover:bg-zen/10 rounded transition-colors"
|
|
>
|
|
{preset.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Controls */}
|
|
<div className="flex gap-1 bg-nothing/80 backdrop-blur-sm rounded-lg p-1 border border-zen/10">
|
|
<button
|
|
onClick={onTogglePlay}
|
|
className="px-3 py-1.5 text-xs text-flow-green/70 hover:bg-flow-green/10 rounded transition-colors"
|
|
>
|
|
{isPlaying ? '⏸' : '▶'}
|
|
</button>
|
|
<button
|
|
onClick={onReset}
|
|
className="px-3 py-1.5 text-xs text-anti-green/50 hover:bg-anti-green/10 rounded transition-colors"
|
|
>
|
|
Reset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|