72 lines
1.6 KiB
TypeScript
72 lines
1.6 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 type { LucideProps } from "lucide-react";
|
|
import { BookmarkIcon } 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 overflow-hidden text-muted-foreground",
|
|
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>
|
|
);
|