54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { cn } from '@/lib/utils';
|
|
import { BookmarkIcon, type LucideProps } from 'lucide-react';
|
|
import type { ComponentProps, HTMLAttributes } from 'react';
|
|
|
|
export type CheckpointProps = HTMLAttributes<HTMLDivElement>;
|
|
|
|
export const Checkpoint = ({ className, children, ...props }: CheckpointProps) => (
|
|
<div
|
|
className={cn('flex items-center gap-0.5 text-muted-foreground overflow-hidden', className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
<Separator />
|
|
</div>
|
|
);
|
|
|
|
export type CheckpointIconProps = LucideProps;
|
|
|
|
export const CheckpointIcon = ({ className, children, ...props }: CheckpointIconProps) =>
|
|
children ?? <BookmarkIcon className={cn('size-4 shrink-0', className)} {...props} />;
|
|
|
|
export type CheckpointTriggerProps = ComponentProps<typeof Button> & {
|
|
tooltip?: string;
|
|
};
|
|
|
|
export const CheckpointTrigger = ({
|
|
children,
|
|
variant = 'ghost',
|
|
size = 'sm',
|
|
tooltip,
|
|
...props
|
|
}: CheckpointTriggerProps) =>
|
|
tooltip ? (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button size={size} type="button" variant={variant} {...props}>
|
|
{children}
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent align="start" side="bottom">
|
|
{tooltip}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : (
|
|
<Button size={size} type="button" variant={variant} {...props}>
|
|
{children}
|
|
</Button>
|
|
);
|