langfuse

1
// https://tailwindui.com/components/application-ui/data-display/description-lists
2

3
import clsx from "clsx";
4
import { type ReactNode } from "react";
5

6
export default function DescriptionList(props: {
7
  header?: {
8
    title: string;
9
    description: string;
10
  };
11
  items: { label: string; value: string | ReactNode }[];
12
  descriptionColumns?: number;
13
  valueColumns?: number;
14
}) {
15
  const { descriptionColumns = 1, valueColumns = 2 } = props;
16
  const totalColumns = descriptionColumns + valueColumns;
17
  return (
18
    <div>
19
      {props.header ? (
20
        <div className="px-4 sm:px-0">
21
          <h3 className="text-base font-semibold leading-7 text-gray-900">
22
            {props.header.title}
23
          </h3>
24
          <p className="mt-1 max-w-2xl text-sm leading-6 text-gray-500">
25
            {props.header.description}
26
          </p>
27
        </div>
28
      ) : null}
29
      <div className={clsx(props.header && "mt-6 border-t border-gray-100")}>
30
        <dl className="divide-y divide-gray-100">
31
          {props.items.map((item) => (
32
            <div
33
              key={item.label}
34
              className={`sm:grid-cols-${totalColumns} px-4 py-3 sm:grid sm:gap-4 sm:px-0`}
35
            >
36
              <dt className="text-sm font-medium leading-6 text-gray-900">
37
                {item.label}
38
              </dt>
39
              <dd
40
                className={`mt-1 text-sm leading-6 text-gray-700 sm:col-span-${valueColumns} sm:mt-0`}
41
              >
42
                {item.value}
43
              </dd>
44
            </div>
45
          ))}
46
        </dl>
47
      </div>
48
    </div>
49
  );
50
}
51