# Description List

Term and details pairs: an account, a deployment.

Source page: https://sproutboat.com/ikada/components/description-list

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/description-list.json
```
Or from the package: `import { DescriptionList } from "@sproutboat/ikada";`
## Usage
```tsx
import { DescriptionList } from "@/components/ikada/description-list";

const items = [
  { id: "name", term: "Name", details: "robin" },
  { id: "region", term: "Region", details: "eu-west" },
  { id: "domain", term: "Domain", details: "robin.sproutboat.app", mono: true },
  {
    id: "status",
    term: "Status",
    details: (
      <Badge tone="success" dot live>
        Live
      </Badge>
    ),
  },
];

<DescriptionList items={items} />
```
## Examples
### Inline
Terms sit beside their details once the list is 32rem wide; narrower, they stack.
```tsx
const items = [
  { id: "name", term: "Name", details: "robin" },
  { id: "region", term: "Region", details: "eu-west" },
  { id: "domain", term: "Domain", details: "robin.sproutboat.app", mono: true },
  {
    id: "status",
    term: "Status",
    details: (
      <Badge tone="success" dot live>
        Live
      </Badge>
    ),
  },
];

<DescriptionList items={items} />
```
### Stacked
Each term above its details, at any width.
```tsx
const items = [
  { id: "name", term: "Name", details: "robin" },
  { id: "region", term: "Region", details: "eu-west" },
  { id: "domain", term: "Domain", details: "robin.sproutboat.app", mono: true },
  {
    id: "status",
    term: "Status",
    details: (
      <Badge tone="success" dot live>
        Live
      </Badge>
    ),
  },
];

<DescriptionList items={items} layout="stacked" />
```
## Props
### DescriptionListProps
Also takes every prop of `Omit<ComponentProps<"dl">, "children">`.
| Prop | Type | Description |
| --- | --- | --- |
| items | `readonly DescriptionItem[]` | Term and details pairs, in order, each with a stable id. |
| layout? | `"inline" \| "stacked"` | `stacked` puts each term above its details; `inline` puts them side by side from 32rem up. Default `inline`. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/description-list.tsx