node.tsx 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. import {
  2. Card,
  3. CardAction,
  4. CardContent,
  5. CardDescription,
  6. CardFooter,
  7. CardHeader,
  8. CardTitle,
  9. } from '@/components/ui/card';
  10. import { cn } from '@/lib/utils';
  11. import { Handle, Position } from '@xyflow/react';
  12. import type { ComponentProps } from 'react';
  13. export type NodeProps = ComponentProps<typeof Card> & {
  14. handles: {
  15. target: boolean;
  16. source: boolean;
  17. };
  18. };
  19. export const Node = ({ handles, className, ...props }: NodeProps) => (
  20. <Card
  21. className={cn('node-container relative size-full h-auto w-sm gap-0 rounded-md p-0', className)}
  22. {...props}
  23. >
  24. {handles.target && <Handle position={Position.Left} type="target" />}
  25. {handles.source && <Handle position={Position.Right} type="source" />}
  26. {props.children}
  27. </Card>
  28. );
  29. export type NodeHeaderProps = ComponentProps<typeof CardHeader>;
  30. export const NodeHeader = ({ className, ...props }: NodeHeaderProps) => (
  31. <CardHeader
  32. className={cn('gap-0.5 rounded-t-md border-b bg-secondary p-3!', className)}
  33. {...props}
  34. />
  35. );
  36. export type NodeTitleProps = ComponentProps<typeof CardTitle>;
  37. export const NodeTitle = (props: NodeTitleProps) => <CardTitle {...props} />;
  38. export type NodeDescriptionProps = ComponentProps<typeof CardDescription>;
  39. export const NodeDescription = (props: NodeDescriptionProps) => <CardDescription {...props} />;
  40. export type NodeActionProps = ComponentProps<typeof CardAction>;
  41. export const NodeAction = (props: NodeActionProps) => <CardAction {...props} />;
  42. export type NodeContentProps = ComponentProps<typeof CardContent>;
  43. export const NodeContent = ({ className, ...props }: NodeContentProps) => (
  44. <CardContent className={cn('p-3', className)} {...props} />
  45. );
  46. export type NodeFooterProps = ComponentProps<typeof CardFooter>;
  47. export const NodeFooter = ({ className, ...props }: NodeFooterProps) => (
  48. <CardFooter className={cn('rounded-b-md border-t bg-secondary p-3!', className)} {...props} />
  49. );