- Replace all rgba(6,182,212,...) cyan focus borders and accents with rgba(249,115,22,...) ember orange across 21+ component files - Remove all var(--glass-border) references (undefined variable) with var(--color-border-default) across 24 files - Remove deprecated blur orbs and glass-morphism effects from SurveyPage, SurveyThankYouPage, and LoginPage - Migrate landing.css from hardcoded hex to CSS custom properties (~97 replacements for single-source theming) - Fix off-palette grays in FlowPilotAnalyticsPage chart styling (#8891a0 → #848b9b, #18191f → var(--color-bg-card)) - Update stale comments: "cyan brand" → "accent brand" in GlowEdge, "gradient cyan square" → "gradient orange square" in BrandLogo - Rename glow-cyan SVG filter ID to glow-accent - Fix category color comment: "cyan" → "deep orange" Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import { HelpCircle, Zap, CheckCircle, FileText, Layout } from 'lucide-react'
|
|
|
|
interface NodeSummaryProps {
|
|
node?: { id: string; type: string; question?: string; title?: string; description?: string } | null
|
|
flowName?: string
|
|
flowType?: string
|
|
nodeCount?: number
|
|
}
|
|
|
|
const NODE_ICONS: Record<string, typeof HelpCircle> = {
|
|
decision: HelpCircle,
|
|
action: Zap,
|
|
solution: CheckCircle,
|
|
}
|
|
|
|
const NODE_COLORS: Record<string, string> = {
|
|
decision: 'text-blue-400',
|
|
action: 'text-yellow-400',
|
|
solution: 'text-green-400',
|
|
}
|
|
|
|
export function NodeSummary({ node, flowName, flowType, nodeCount }: NodeSummaryProps) {
|
|
if (!node) {
|
|
return (
|
|
<div className="border-b px-3 py-2.5" style={{ borderColor: 'var(--color-border-default)' }}>
|
|
<div className="flex items-center gap-2">
|
|
<Layout className="h-3.5 w-3.5 text-muted-foreground" />
|
|
<span className="text-xs font-medium text-foreground truncate">
|
|
{flowName || 'Untitled Flow'}
|
|
</span>
|
|
</div>
|
|
<div className="mt-1 flex items-center gap-3 font-sans text-[0.625rem] uppercase tracking-widest text-muted-foreground">
|
|
<span>{flowType || 'flow'}</span>
|
|
{nodeCount !== undefined && <span>{nodeCount} nodes</span>}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const Icon = NODE_ICONS[node.type] || FileText
|
|
const colorClass = NODE_COLORS[node.type] || 'text-muted-foreground'
|
|
|
|
return (
|
|
<div className="border-b px-3 py-2.5" style={{ borderColor: 'var(--color-border-default)' }}>
|
|
<div className="flex items-center gap-2">
|
|
<Icon className={`h-3.5 w-3.5 ${colorClass}`} />
|
|
<span className="font-sans text-[0.625rem] uppercase tracking-widest text-muted-foreground">
|
|
{node.type}
|
|
</span>
|
|
</div>
|
|
<p className="mt-1 text-sm font-medium text-foreground truncate">
|
|
{node.question || node.title || node.id}
|
|
</p>
|
|
{node.description && (
|
|
<p className="mt-0.5 text-xs text-muted-foreground truncate">{node.description}</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|