node-header

1import { Slot } from "@radix-ui/react-slot";
2import { EllipsisVertical } from "lucide-react";
3import React, { type ComponentProps } from "react";
4import { Button } from "@/components/ui/button";
5import {
6	DropdownMenu,
7	DropdownMenuContent,
8	DropdownMenuTrigger,
9} from "@/components/ui/dropdown-menu";
10import { cn } from "@/lib/utils";
11 
12/* NODE HEADER -------------------------------------------------------------- */
13 
14export type NodeHeaderProps = React.HTMLAttributes<HTMLElement>;
15 
16/**
17 * A container for a consistent header layout intended to be used inside the
18 * `<BaseNode />` component.
19 */
20export const NodeHeader = React.forwardRef<HTMLElement, NodeHeaderProps>(
21	({ className, ...props }, ref) => {
22		return (
23			<header
24				ref={ref}
25				{...props}
26				className={cn(
27					"mb-4 flex items-center justify-between gap-2 px-3 py-2",
28					// Remove or modify these classes if you modify the padding in the
29					// `<BaseNode />` component.
30					"-mx-5 -mt-5",
31					className,
32				)}
33			/>
34		);
35	},
36);
37 
38NodeHeader.displayName = "NodeHeader";
39 
40/* NODE HEADER TITLE -------------------------------------------------------- */
41 
42export interface NodeHeaderTitleProps
43	extends React.HTMLAttributes<HTMLHeadingElement> {
44	asChild?: boolean;
45}
46 
47/**
48 * The title text for the node. To maintain a native application feel, the title
49 * text is not selectable.
50 */
51export const NodeHeaderTitle = React.forwardRef<
52	HTMLHeadingElement,
53	NodeHeaderTitleProps
54>(({ className, asChild, ...props }, ref) => {
55	const Comp = asChild ? Slot : "h3";
56 
57	return (
58		<Comp
59			ref={ref}
60			{...props}
61			className={cn(className, "user-select-none flex-1 font-semibold")}
62		/>
63	);
64});
65 
66NodeHeaderTitle.displayName = "NodeHeaderTitle";
67 
68/* NODE HEADER ICON --------------------------------------------------------- */
69 
70export type NodeHeaderIconProps = React.HTMLAttributes<HTMLSpanElement>;
71 
72export const NodeHeaderIcon = React.forwardRef<
73	HTMLSpanElement,
74	NodeHeaderIconProps
75>(({ className, ...props }, ref) => {
76	return (
77		<span ref={ref} {...props} className={cn(className, "[&>*]:size-5")} />
78	);
79});
80 
81NodeHeaderIcon.displayName = "NodeHeaderIcon";
82 
83/* NODE HEADER ACTIONS ------------------------------------------------------ */
84 
85export type NodeHeaderActionsProps = React.HTMLAttributes<HTMLDivElement>;
86 
87/**
88 * A container for right-aligned action buttons in the node header.
89 */
90export const NodeHeaderActions = React.forwardRef<
91	HTMLDivElement,
92	NodeHeaderActionsProps
93// … truncated