40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { type NodeProps } from "@xyflow/react";
|
|
import { PencilIcon, WaypointsIcon } from "lucide-react";
|
|
import { NodeShell } from "./NodeShell";
|
|
|
|
export function ChoiceNode({ data }: NodeProps) {
|
|
const d = data as { question?: string; options?: Array<{ id: string; label: string }> };
|
|
const options = d.options ?? [];
|
|
|
|
return (
|
|
<NodeShell
|
|
nodeType="choice"
|
|
className="bg-amber-950/80 border border-amber-500/50 rounded-lg shadow-md min-w-56"
|
|
>
|
|
<div className="flex items-center gap-2 px-3 py-2 border-b border-amber-500/30">
|
|
<WaypointsIcon className="size-4 text-amber-400 shrink-0" />
|
|
<span className="text-sm font-medium text-amber-200 flex-1 truncate">
|
|
{d.question || "Untitled Choice"}
|
|
</span>
|
|
<PencilIcon className="size-3 text-amber-500/60 shrink-0" />
|
|
</div>
|
|
<div className="px-3 py-2 space-y-1">
|
|
{options.length === 0 ? (
|
|
<span className="text-xs text-amber-400/60 italic">No options defined.</span>
|
|
) : (
|
|
options.map((opt) => (
|
|
<div
|
|
key={opt.id}
|
|
className="flex items-center gap-2 text-xs text-amber-300/80 bg-amber-950/40 rounded px-2 py-1"
|
|
>
|
|
<span className="w-1 h-1 rounded-full bg-amber-400 shrink-0" />
|
|
<span className="flex-1 truncate">{opt.label}</span>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</NodeShell>
|
|
);
|
|
}
|