"use client"; import type * as React from "react"; import { formatCompact } from "@/registry/default/lib/chart-utils"; import { cn } from "@/registry/default/lib/utils"; export type BarListItem = { name: string; value: number; /** Makes the row a link. */ href?: string; /** Shown before the name, e.g. a flag or favicon. */ icon?: React.ReactNode; key?: string; }; export type BarListProps = { data: T[]; valueFormatter?: (value: number) => string; sortOrder?: "descending" | "ascending" | "none"; /** Makes rows buttons; called with the clicked item. */ onValueClick?: (item: T) => void; className?: string; "aria-label"?: string; }; export function BarList({ data, valueFormatter = formatCompact, sortOrder = "descending", onValueClick, className, "aria-label": ariaLabel, }: BarListProps) { const rows = sortOrder === "none" ? data : [...data].sort((a, b) => sortOrder === "descending" ? b.value - a.value : a.value - b.value, ); const max = Math.max(...rows.map((row) => row.value), 0); return (

{row.icon} {row.name} ); const rowClass = "relative flex h-8 min-w-0 flex-1 items-center rounded-md px-2.5 text-sm"; return (

{row.href ? ( {label} ) : onValueClick ? ( ) : (

{label}

)} {valueFormatter(row.value)}

); })}

); }