Data list

TS

import { … } from "@fungi.computer/caps/components/data-list";

Facts

TSX

import {
  DataList,
  DataRow,
  DataListHeading,
} from "@fungi.computer/caps/components/data-list";

export default function Facts() {
  return (
    <div className="w-full max-w-sm">
      <DataListHeading>Grow log</DataListHeading>
      <DataList aria-label="Grow log facts">
        <DataRow>
          <span>Substrate</span>
          <span>Hardwood pellets</span>
        </DataRow>
        <DataRow>
          <span>Species</span>
          <span>Lion's mane</span>
        </DataRow>
        <DataRow>
          <span>Days to harvest</span>
          <span>3</span>
        </DataRow>
      </DataList>
    </div>
  );
}

Density and aside

TSX

import {
  DataList,
  DataRow,
  DataListHeading,
} from "@fungi.computer/caps/components/data-list";

export default function DensityAndAside() {
  return (
    <div className="w-full max-w-sm">
      <DataListHeading aside={<span>2 active</span>}>
        Grow tents
      </DataListHeading>
      <DataList density="compact" aria-label="Grow tents">
        <DataRow>
          <span>Tent A</span>
          <span>88% humidity</span>
        </DataRow>
        <DataRow>
          <span>Tent B</span>
          <span>91% humidity</span>
        </DataRow>
        <DataRow>
          <span>Tent C</span>
          <span>idle</span>
        </DataRow>
      </DataList>
    </div>
  );
}

Props

DataListProps

Prop	Type	Description
density?	"regular" | "compact"

• density?"regular" | "compact"

DataListHeadingProps

Prop	Type	Description
level?	2 | 3	Heading level; the host keeps its document outline.
aside?	ReactNode	Optional trailing count or status, such as a Badge.

• level?2 | 3

  Heading level; the host keeps its document outline.

• aside?ReactNode

  Optional trailing count or status, such as a Badge.

Full types: API reference.