checkpoint.tsx 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. 'use client';
  2. import { Button } from '@/components/ui/button';
  3. import { Separator } from '@/components/ui/separator';
  4. import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
  5. import { cn } from '@/lib/utils';
  6. import { BookmarkIcon, type LucideProps } from 'lucide-react';
  7. import type { ComponentProps, HTMLAttributes } from 'react';
  8. export type CheckpointProps = HTMLAttributes<HTMLDivElement>;
  9. export const Checkpoint = ({ className, children, ...props }: CheckpointProps) => (
  10. <div
  11. className={cn('flex items-center gap-0.5 text-muted-foreground overflow-hidden', className)}
  12. {...props}
  13. >
  14. {children}
  15. <Separator />
  16. </div>
  17. );
  18. export type CheckpointIconProps = LucideProps;
  19. export const CheckpointIcon = ({ className, children, ...props }: CheckpointIconProps) =>
  20. children ?? <BookmarkIcon className={cn('size-4 shrink-0', className)} {...props} />;
  21. export type CheckpointTriggerProps = ComponentProps<typeof Button> & {
  22. tooltip?: string;
  23. };
  24. export const CheckpointTrigger = ({
  25. children,
  26. variant = 'ghost',
  27. size = 'sm',
  28. tooltip,
  29. ...props
  30. }: CheckpointTriggerProps) =>
  31. tooltip ? (
  32. <Tooltip>
  33. <TooltipTrigger asChild>
  34. <Button size={size} type="button" variant={variant} {...props}>
  35. {children}
  36. </Button>
  37. </TooltipTrigger>
  38. <TooltipContent align="start" side="bottom">
  39. {tooltip}
  40. </TooltipContent>
  41. </Tooltip>
  42. ) : (
  43. <Button size={size} type="button" variant={variant} {...props}>
  44. {children}
  45. </Button>
  46. );