import * as React from "react"

import { cn } from "@/lib/utils"

interface ComparisonBarProps extends React.HTMLAttributes<HTMLDivElement> {
  leftLabel: string
  rightLabel: string
  leftValue: number
  rightValue: number
  showPercentages?: boolean
}

function ComparisonBar({
  leftLabel,
  rightLabel,
  leftValue,
  rightValue,
  showPercentages = true,
  className,
  ...props
}: ComparisonBarProps) {
  const total = leftValue + rightValue
  const leftPercent = total > 0 ? (leftValue / total) * 100 : 50
  const rightPercent = total > 0 ? 100 - leftPercent : 50

  return (
    <div
      className={cn(
        "flex flex-col gap-4 rounded-2xl border border-border bg-card p-5",
        className
      )}
      {...props}
    >
      <div className="flex items-center justify-between gap-4 text-sm">
        <div className="space-y-1">
          <p className="text-muted-foreground">{leftLabel}</p>
          <p className="text-lg font-semibold text-foreground">
            {leftValue}
          </p>
        </div>
        <div className="space-y-1 text-right">
          <p className="text-muted-foreground">{rightLabel}</p>
          <p className="text-lg font-semibold text-foreground">
            {rightValue}
          </p>
        </div>
      </div>
      <div className="h-3 w-full overflow-hidden rounded-full border border-border bg-muted">
        <div className="flex h-full w-full">
          <div
            className="h-full bg-card"
            style={{ width: `${leftPercent}%` }}
          />
          <div
            className="h-full bg-background"
            style={{ width: `${rightPercent}%` }}
          />
        </div>
      </div>
      {showPercentages ? (
        <div className="flex items-center justify-between text-xs font-semibold">
          <span className="text-secondary-foreground">
            {leftPercent.toFixed(0)}%
          </span>
          <span className="text-secondary-foreground">
            {rightPercent.toFixed(0)}%
          </span>
        </div>
      ) : null}
    </div>
  )
}

export { ComparisonBar }
export type { ComparisonBarProps }
Comparison Bar

Dependencies

Files

Installation
