supabase/apps/studio/components/interfaces/QueryPerformance/QueryCosts.tsx

import { cn } from 'ui'

interface QueryCostsProps {
  currentCost?: number
  improvedCost?: number
  improvement?: number
  className?: string
}

export const QueryCosts = ({
  currentCost,
  improvedCost,
  improvement,
  className,
}: QueryCostsProps) => {
  if (!currentCost) return null

  return (
    <div className={cn('flex flex-col gap-y-4', className)}>
      <h3 className="text-sm">Query costs</h3>
      <div className="flex flex-col gap-y-2 rounded bg-surface-100 px-4 py-3">
        <div className="flex items-center justify-between">
          <p className="text-sm text-foreground-light">Total cost of query</p>
          <div className="flex flex-col items-end gap-y-1">
            <div className="flex items-center gap-x-4">
              <p className="text-sm text-foreground-light">Currently:</p>
              <p className="font-mono text-sm">{currentCost.toFixed(2)}</p>
            </div>
            {improvedCost && (
              <div className="flex items-center gap-x-4">
                <p className="text-sm text-foreground-light">With index:</p>
                <div className="flex items-center gap-x-2">
                  <p className="font-mono text-sm">{improvedCost.toFixed(2)}</p>
                  {improvement && <p className="text-sm text-brand">↓ {improvement.toFixed(1)}%</p>}
                </div>
              </div>
            )}
          </div>
        </div>
        <button className="text-sm text-brand hover:text-brand-600 transition">View more</button>
      </div>
    </div>
  )
}