36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import { HelpCircle } from 'lucide-react'
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
|
import { getNodeHelp } from '@/lib/graph/nodeRegistry'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
type Props = {
|
|
nodeType: string
|
|
className?: string
|
|
}
|
|
|
|
export function NodeHelpPopover({ nodeType, className }: Props) {
|
|
const { title, content } = getNodeHelp(nodeType)
|
|
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger
|
|
asChild
|
|
className={cn(
|
|
'shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
|
|
className
|
|
)}
|
|
aria-label={`Help: ${title}`}
|
|
>
|
|
<button type="button">
|
|
<HelpCircle className="size-3.5" />
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent side="top" align="end" className="w-80 max-h-[70vh] overflow-y-auto">
|
|
<h3 className="text-sm font-semibold text-foreground">{title}</h3>
|
|
<div className="mt-2">{content}</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|