Card Tree Node

1"use client";
2 
3import { memo } from "react";
4import { cn } from "@/lib/utils";
5import type { FlatField } from "../types";
6import { formatValue } from "../lib/format-value";
7 
8/**
9 * Paints the first N flat-field entries from a card-tree tree as a definition
10 * list. Type-aware styling: numbers right-aligned (tabular), booleans + dates
11 * narrow, strings fluid.
12 */
13function FlatFieldStripImpl({ fields }: { fields: FlatField[] }) {
14  if (fields.length === 0) return null;
15  return (
16    <dl className="grid grid-cols-[max-content_1fr] gap-x-2 gap-y-0.5 px-3 py-2 text-xs">
17      {fields.map((field) => (
18        <div key={field.key} className="contents">
19          <dt className="truncate font-medium text-muted-foreground">{field.key}</dt>
20          <dd
21            className={cn(
22              "truncate",
23              field.type === "number" && "text-right font-mono tabular-nums",
24              field.type === "boolean" && "text-center",
25              field.type === "date" && "font-mono",
26            )}
27          >
28            {formatValue(field.value, field.type)}
29          </dd>
30        </div>
31      ))}
32    </dl>
33  );
34}
35 
36export const FlatFieldStrip = memo(FlatFieldStripImpl);