Open History to see the last commit
1import { X } from "lucide-react";
2import type { ReactNode } from "react";
3import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";
4import { cn } from "~/lib/utils";
5
6interface PanelTabCloseButtonProps {
7 children: ReactNode;
8 label: string;
9 onClick: () => void;
10 tooltip?: string;
11 showOnPhone?: boolean;
12}
13
14export function PanelTabCloseButton({
15 children,
16 label,
17 onClick,
18 tooltip,
19 showOnPhone = false,
20}: PanelTabCloseButtonProps) {
21 const button = (
22 <button
23 type="button"
24 className="cursor-pointer group/close relative flex size-3.5 shrink-0 items-center justify-center rounded-sm outline-none hover:surface-ghost-hover focus-visible:inset-ring-2 focus-visible:inset-ring-ring"
25 aria-label={label}
26 onClick={onClick}
27 >
28 <span
29 className={cn(
30 "relative flex size-3.5 items-center justify-center group-hover/tab:hidden group-focus-visible/close:hidden",
31 showOnPhone && "max-md:hidden",
32 )}
33 >
34 {children}
35 </span>
36 <X
37 className={cn(
38 "hidden size-3 group-hover/tab:block group-focus-visible/close:block",
39 showOnPhone && "max-md:block",
40 )}
41 />
42 </button>
43 );
44
45 if (!tooltip) return button;
46
47 return (
48 <Tooltip>
49 <TooltipTrigger render={button} />
50 <TooltipPopup>{tooltip}</TooltipPopup>
51 </Tooltip>
52 );
53}