70_node_appendix

Node Appendix

A wrapper component for dynamically appending information to nodes in an absolutely positioned container.

UI Component: node-appendix

index.tsx

import type { ComponentProps } from "react";
import { cva, type VariantProps } from "class-variance-authority";
 
import { cn } from "@/lib/utils";
 
const appendixVariants = cva(
  "node-appendix absolute flex w-full flex-col items-center rounded-md border bg-card p-1 text-card-foreground",
  {
    variants: {
      position: {
        top: "-translate-y-full -my-1",
        bottom: "top-full my-1",
        left: "-left-full -mx-1",
        right: "left-full mx-1",
      },
    },
    defaultVariants: {
      position: "top",
    },
  },
);
 
export interface NodeAppendixProps
  extends ComponentProps<"div">, VariantProps<typeof appendixVariants> {
  className?: string;
  position?: "top" | "bottom" | "left" | "right";
}
 
export function NodeAppendix({
  children,
  className,
  position,
  ...props
}: NodeAppendixProps) {
  return (
    <div className={cn(appendixVariants({ position }), className)} {...props}>
      {children}
    </div>
  );
}

component-example.tsx

import { NodeAppendix } from "@/registry/components/node-appendix";
import {
  BaseNode,
  BaseNodeContent,
  BaseNodeHeader,
  BaseNodeHeaderTitle,
} from "../base-node";
 
export const NodeAppendixDemo = () => {
  return (
    <BaseNode>
      <NodeAppendix position="bottom" className="p-2">
        Add custom content to the node appendix.
      </NodeAppendix>
      <BaseNodeHeader className="border-b">
        <BaseNodeHeaderTitle>Custom Node</BaseNodeHeaderTitle>
      </BaseNodeHeader>
      <BaseNodeContent>
        <p>Node Content goes here.</p>
      </BaseNodeContent>
    </BaseNode>
  );
};