# Medication List

> Today's doses in order, each with its time, name, dose, a status in words and a "taken" button.

Component · Life · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/MedicationList/)

Today's doses in order, each with its time, name, dose, a status in words and a "taken" button.

- `status` is set by the app, which knows the clock: `taken`, `due`, `missed` or `upcoming`.
- `onTake(id)` adds a button named "Mark Ramipril as taken" to doses that are due or missed.

## Example

```tsx
import * as React from "react";
import { MedicationList, Panel } from "@twentyfirstmedia/pro";
import type { MedicationItem } from "@twentyfirstmedia/pro";

export default function Preview() {
  const [items, setItems] = React.useState<MedicationItem[]>([
    { id: "d", name: "Vitamin D", dose: "1,000 IU", time: "07:30", status: "taken" },
    {
      id: "m",
      name: "Metformin",
      dose: "500 mg",
      note: "With breakfast",
      time: "08:00",
      status: "missed",
    },
    { id: "r", name: "Ramipril", dose: "5 mg", time: "13:00", status: "due" },
    {
      id: "s",
      name: "Magnesium",
      dose: "300 mg",
      note: "Before bed",
      time: "22:00",
      status: "upcoming",
    },
  ]);
  return (
    <Panel title="Today" subtitle="4 doses · 1 taken" style={{ maxWidth: 560 }}>
      <MedicationList
        items={items}
        onTake={(id) =>
          setItems((list) => list.map((m) => (m.id === id ? { ...m, status: "taken" } : m)))
        }
      />
    </Panel>
  );
}
```

## Props

### MedicationList

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `MedicationItem[]` | Required |
| `onTake?` | `(id: string) => void` | "Mark as taken" was pressed. |
| `label?` | `string` | Accessible name (default "Medication"). |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Panel

| Prop | Type | Notes |
| --- | --- | --- |
| `side?` | `boolean` |  |
| `title?` | `string` |  |
| `subtitle?` | `string` |  |
| `action?` | `ReactNode` |  |
| `children?` | `ReactNode` |  |
| `surface?` | `Surface` | `"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |