38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
import { cn, type Accent } from '@/lib/cn';
|
|
|
|
interface FlowNodeProps {
|
|
accent?: Accent;
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const ACCENT_BORDER_TEXT: Record<Accent, string> = {
|
|
red: 'border-red text-red',
|
|
orange: 'border-orange text-orange',
|
|
yellow: 'border-yellow text-yellow',
|
|
green: 'border-green text-green',
|
|
cyan: 'border-cyan text-cyan',
|
|
blue: 'border-blue text-blue',
|
|
purple: 'border-purple text-purple',
|
|
pink: 'border-pink text-pink',
|
|
rose: 'border-rose text-rose',
|
|
teal: 'border-teal text-teal',
|
|
};
|
|
|
|
/** Flow node from design.md §5.5 — chained horizontally with arrows in flex rows. */
|
|
export function FlowNode({ accent, children, className }: FlowNodeProps) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-block bg-bg-card rounded-md border px-3 py-2 font-mono text-4xs whitespace-nowrap shrink-0',
|
|
accent ? ACCENT_BORDER_TEXT[accent] : 'border-border text-text',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|