Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
1.5 kB · 58 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859import { Badge } from "@openstatus/ui/components/ui/badge";import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,} from "@openstatus/ui/components/ui/tooltip";import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";
export function TableCellBadge({ value, className, ...props}: React.ComponentProps<typeof Badge> & { value: unknown }) { const ref = useRef<HTMLSpanElement>(null); const [isTruncated, setIsTruncated] = useState(false); const [open, setOpen] = useState(false);
useEffect(() => { if (ref.current) { setIsTruncated(ref.current.scrollWidth > ref.current.clientWidth); } }, [ref]);
return ( <Badge variant="outline" className={cn( "max-w-16 truncate font-mono", value ? "text-foreground" : "text-foreground/70", className, )} {...props} > <TooltipProvider> {isTruncated ? ( <Tooltip open={open} onOpenChange={setOpen}> <TooltipTrigger onPointerDown={(event) => event.preventDefault()} asChild > <span ref={ref} className="block truncate"> {String(value)} </span> </TooltipTrigger> <TooltipContent>{String(value)}</TooltipContent> </Tooltip> ) : ( <span ref={ref} className="truncate"> {String(value)} </span> )} </TooltipProvider> </Badge> );}