import { cn } from "~/lib/utils";import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip"; type ConnectionStatusDotProps = {  tooltipText?: string | null;  dotClassName: string;  pingClassName?: string | null;}; export function ConnectionStatusDot({  tooltipText,  dotClassName,  pingClassName,}: ConnectionStatusDotProps) {  const dotContent = (    <>      {pingClassName ? (        <span          className={cn(            "absolute inline-flex h-full w-full animate-status-ping rounded-full",            pingClassName,          )}        />      ) : null}      <span className={cn("relative inline-flex size-2 rounded-full", dotClassName)} />    </>  );   if (!tooltipText) {    return (      <span className="relative flex size-3 shrink-0 items-center justify-center">        {dotContent}      </span>    );  }   const dot = (    <button      type="button"      title={tooltipText}      aria-label={tooltipText}      className="relative flex size-3 shrink-0 cursor-help items-center justify-center rounded-full outline-hidden"    >      {dotContent}    </button>  );   return (    <Tooltip>      <TooltipTrigger render={dot} />      <TooltipPopup side="top" className="max-w-80 whitespace-pre-wrap leading-tight">        {tooltipText}      </TooltipPopup>    </Tooltip>  );}