QueryInsightsHealthMetric.tsx31 lines · main

1	import { cn } from 'ui'
2
3	interface QueryInsightsHealthMetricProps {
4	label: string
5	value: number | string | undefined
6	className?: string
7	isLoading?: boolean
8	}
9
10	export const QueryInsightsHealthMetric = ({
11	label,
12	value,
13	className,
14	isLoading,
15	}: QueryInsightsHealthMetricProps) => {
16	return (
17	<div
18	className={cn(
19	'font-mono text-xs flex items-center justify-between px-4 py-2 h-10',
20	className
21	)}
22	>
23	<span className="text-foreground-lighter tracking-wider truncate uppercase">{label}</span>
24	{isLoading ? (
25	<div className="h-3 w-12 rounded-sm bg-surface-300 animate-pulse" />
26	) : (
27	<span className="text-foreground font-medium tabular-nums">{value}</span>
28	)}
29	</div>
30	)
31	}