25 lines
868 B
TypeScript
25 lines
868 B
TypeScript
'use client'
|
|
|
|
import { Handle, Position, type NodeProps } from '@xyflow/react'
|
|
|
|
export default function SinkNode({ data }: NodeProps) {
|
|
const fillLevel = (data as any).fillLevel ?? 0
|
|
|
|
return (
|
|
<div className="flow-node border-flow-green/30">
|
|
<Handle type="target" position={Position.Left} className="!bg-flow-green/60 !w-3 !h-3" />
|
|
<div className="text-center">
|
|
<div className="text-zen/40 text-lg mb-1">◎</div>
|
|
<div className="text-zen/60 text-xs font-mono">{(data as any).label || 'Sink'}</div>
|
|
{/* Fill level indicator */}
|
|
<div className="w-full h-2 bg-void/50 rounded mt-2 overflow-hidden">
|
|
<div
|
|
className="h-full bg-flow-green/60 rounded transition-all duration-500"
|
|
style={{ width: `${Math.min(100, fillLevel)}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|