IndexImprovementText.tsx28 lines · main

1	import { HTMLAttributes } from 'react'
2	import { cn } from 'ui'
3
4	import { calculateImprovement } from './index-advisor.utils'
5
6	interface IndexImprovementTextProps extends HTMLAttributes<HTMLParagraphElement> {
7	indexStatements: string[]
8	totalCostBefore: number
9	totalCostAfter: number
10	}
11
12	export const IndexImprovementText = ({
13	indexStatements,
14	totalCostBefore,
15	totalCostAfter,
16	className,
17	...props
18	}: IndexImprovementTextProps) => {
19	const improvement = calculateImprovement(totalCostBefore, totalCostAfter)
20
21	return (
22	<p className={cn('text-sm text-foreground-light mb-3', className)} {...props}>
23	Query's performance can be improved by{' '}
24	<span className="text-brand">{improvement.toFixed(2)}%</span> by creating this{' '}
25	{indexStatements.length > 1 ? 'indexes' : 'index'}:
26	</p>
27	)
28	}