import * as React from "react"

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

type ProgressBarSegment = {
  label: string
  value: number
}

interface ProgressBarSegmentedProps extends React.HTMLAttributes<HTMLDivElement> {
  segments: ProgressBarSegment[]
  total?: number
  showLegend?: boolean
}

const segmentStyles = ["bg-muted", "bg-muted/80", "bg-muted/60", "bg-muted/40"]

function ProgressBarSegmented({
  segments,
  total,
  showLegend = true,
  className,
  ...props
}: ProgressBarSegmentedProps) {
  const computedTotal = total ?? segments.reduce((sum, item) => sum + item.value, 0)
  const safeTotal = computedTotal > 0 ? computedTotal : 1

  return (
    <div
      className={cn(
        "flex flex-col gap-3 rounded-xl border border-border bg-card p-4",
        className
      )}
      {...props}
    >
      <div className="flex h-3 w-full overflow-hidden rounded-full border border-border bg-background">
        {segments.map((segment, index) => {
          const width = Math.min(100, Math.max(0, (segment.value / safeTotal) * 100))
          const segmentClass = segmentStyles[index % segmentStyles.length]

          return (
            <div
              key={segment.label}
              className={cn("h-full", segmentClass)}
              style={{ width: `${width}%` }}
            />
          )
        })}
      </div>
      {showLegend ? (
        <div className="grid gap-2 sm:grid-cols-2">
          {segments.map((segment, index) => {
            const percent = (segment.value / safeTotal) * 100
            const segmentClass = segmentStyles[index % segmentStyles.length]

            return (
              <div
                key={`${segment.label}-legend`}
                className="flex items-center justify-between gap-3 text-xs"
              >
                <div className="flex items-center gap-2">
                  <span
                    className={cn(
                      "h-2.5 w-2.5 rounded-full ring-1 ring-ring",
                      segmentClass
                    )}
                  />
                  <span className="text-foreground">{segment.label}</span>
                </div>
                <span className="text-muted-foreground tabular-nums">
                  {percent.toFixed(0)}%
                </span>
              </div>
            )
          })}
        </div>
      ) : null}
    </div>
  )
}

export { ProgressBarSegmented }
export type { ProgressBarSegmentedProps, ProgressBarSegment }
Progress Bar Segmented

Dependencies

Files

Installation
