Data list

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4import { StatusBadge, type StatusBadgeProps } from "@/registry/blacksite/ui/status-badge";
5 
6export interface DataListItem {
7  id: string;
8  label: React.ReactNode;
9  value?: React.ReactNode;
10  status?: StatusBadgeProps["status"];
11  statusLabel?: string;
12}
13 
14interface DataListProps extends React.HTMLAttributes<HTMLDivElement> {
15  items: DataListItem[];
16  /** Compact rows are 24px, default rows are 28px. */
17  density?: "default" | "compact";
18  /** Right-align values (typical for KPIs). */
19  alignValues?: "left" | "right";
20}
21 
22const DataList = React.memo(
23  React.forwardRef<HTMLDivElement, DataListProps>(
24    ({ className, items, density = "default", alignValues = "right", ...props }, ref) => {
25      return (
26        <div
27          ref={ref}
28          className={cn("divide-border/60 flex flex-col divide-y", className)}
29          {...props}
30        >
31          {items.map((item) => (
32            <div
33              key={item.id}
34              className={cn(
35                "flex items-center gap-2",
36                density === "compact" ? "h-6 text-[11px]" : "h-7 text-xs",
37              )}
38            >
39              <span className="text-foreground-muted flex-1 truncate">{item.label}</span>
40              <div
41                className={cn(
42                  "flex shrink-0 items-center gap-2",
43                  alignValues === "right" ? "justify-end" : "justify-start",
44                )}
45              >
46                {item.value !== undefined && (
47                  <span className="text-foreground text-mono">{item.value}</span>
48                )}
49                {item.status && <StatusBadge status={item.status}>{item.statusLabel}</StatusBadge>}
50              </div>
51            </div>
52          ))}
53        </div>
54      );
55    },
56  ),
57);
58DataList.displayName = "DataList";
59 
60export { DataList };