mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 12:55:06 +03:00
7ed8ab83a8
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? This introduces Query Insights. It's the first edition of possible future updates. This takes our old prototype and builds upon it for a more action driven insights view. --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: Ali Waseem <waseema393@gmail.com>
32 lines
759 B
TypeScript
32 lines
759 B
TypeScript
import { cn } from 'ui'
|
|
|
|
interface QueryInsightsHealthMetricProps {
|
|
label: string
|
|
value: number | string | undefined
|
|
className?: string
|
|
isLoading?: boolean
|
|
}
|
|
|
|
export const QueryInsightsHealthMetric = ({
|
|
label,
|
|
value,
|
|
className,
|
|
isLoading,
|
|
}: QueryInsightsHealthMetricProps) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'font-mono text-xs flex items-center justify-between px-4 py-2 h-10',
|
|
className
|
|
)}
|
|
>
|
|
<span className="text-foreground-lighter tracking-wider truncate uppercase">{label}</span>
|
|
{isLoading ? (
|
|
<div className="h-3 w-12 rounded bg-surface-300 animate-pulse" />
|
|
) : (
|
|
<span className="text-foreground font-medium tabular-nums">{value}</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|