VPS 4 Deploy Agent
47 lines
2.0 KiB
TypeScript
47 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { Handle, Position } from '@xyflow/react';
|
|
import { Zap, Settings2 } from 'lucide-react';
|
|
|
|
interface TriggerNodeProps {
|
|
data: {
|
|
label: string;
|
|
keyword?: string;
|
|
};
|
|
isConnectable: boolean;
|
|
}
|
|
|
|
export default function TriggerNode({ data, isConnectable }: TriggerNodeProps) {
|
|
return (
|
|
<div className="bg-[#121622] border-[1.5px] border-brand-500/50 rounded-2xl shadow-xl shadow-brand-500/10 min-w-[240px] overflow-hidden group hover:border-brand-500 transition-colors">
|
|
{/* Header */}
|
|
<div className="px-4 py-3 border-b border-brand-500/20 bg-brand-500/5 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className="bg-brand-500/20 w-7 h-7 rounded-md flex items-center justify-center">
|
|
<Zap size={14} className="text-brand-400" />
|
|
</div>
|
|
<span className="text-sm font-bold text-slate-200">Trigger</span>
|
|
</div>
|
|
<button className="text-slate-400 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<Settings2 size={16} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div className="p-4 bg-white/[0.01]">
|
|
<p className="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-2">On exact match</p>
|
|
<div className="bg-black/40 border border-white/5 rounded-lg px-3 py-2 flex items-center text-brand-400 font-mono text-sm max-w-full overflow-hidden text-ellipsis">
|
|
{data.keyword || '#welcome'}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Source Handle (Bottom or Right) */}
|
|
<Handle
|
|
type="source"
|
|
position={Position.Right}
|
|
isConnectable={isConnectable}
|
|
className="!w-4 !h-4 !bg-[#121622] !border-2 !border-brand-500"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|