| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- import {
- Card,
- CardAction,
- CardContent,
- CardDescription,
- CardFooter,
- CardHeader,
- CardTitle,
- } from '@/components/ui/card';
- import { cn } from '@/lib/utils';
- import { Handle, Position } from '@xyflow/react';
- import type { ComponentProps } from 'react';
- export type NodeProps = ComponentProps<typeof Card> & {
- handles: {
- target: boolean;
- source: boolean;
- };
- };
- export const Node = ({ handles, className, ...props }: NodeProps) => (
- <Card
- className={cn('node-container relative size-full h-auto w-sm gap-0 rounded-md p-0', className)}
- {...props}
- >
- {handles.target && <Handle position={Position.Left} type="target" />}
- {handles.source && <Handle position={Position.Right} type="source" />}
- {props.children}
- </Card>
- );
- export type NodeHeaderProps = ComponentProps<typeof CardHeader>;
- export const NodeHeader = ({ className, ...props }: NodeHeaderProps) => (
- <CardHeader
- className={cn('gap-0.5 rounded-t-md border-b bg-secondary p-3!', className)}
- {...props}
- />
- );
- export type NodeTitleProps = ComponentProps<typeof CardTitle>;
- export const NodeTitle = (props: NodeTitleProps) => <CardTitle {...props} />;
- export type NodeDescriptionProps = ComponentProps<typeof CardDescription>;
- export const NodeDescription = (props: NodeDescriptionProps) => <CardDescription {...props} />;
- export type NodeActionProps = ComponentProps<typeof CardAction>;
- export const NodeAction = (props: NodeActionProps) => <CardAction {...props} />;
- export type NodeContentProps = ComponentProps<typeof CardContent>;
- export const NodeContent = ({ className, ...props }: NodeContentProps) => (
- <CardContent className={cn('p-3', className)} {...props} />
- );
- export type NodeFooterProps = ComponentProps<typeof CardFooter>;
- export const NodeFooter = ({ className, ...props }: NodeFooterProps) => (
- <CardFooter className={cn('rounded-b-md border-t bg-secondary p-3!', className)} {...props} />
- );
|