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.4 kB · 37 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738import { cn } from "@openstatus/ui/lib/utils";import type { ReactNode } from "react";
type Props = { label: ReactNode; value?: ReactNode; className?: string; /** Visual emphasis. `default` matches the audit-log palette. */ variant?: "default" | "outline";};
/** * Two-part chip: muted label cell + mono value cell, separated by a * vertical border. Returns `null` when `value` is empty so callers can map * over a heterogeneous metadata bag without filtering first. */export function Pill({ label, value, className, variant = "default" }: Props) { if (value === undefined || value === null || value === "") return null; return ( <div className={cn( "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", className, )} > <div className={cn( "text-foreground/70 border-r py-0.5 pr-1 pl-2", variant === "default" && "bg-muted", )} > {label} </div> <div className="py-0.5 pr-2 pl-1 font-mono">{value}</div> </div> );}