`<MeetingListItem />` component provides a configurable container for a meeting (including active,
scheduled, recorded) list item.

# Structure

The structure of the component is as follows:

```
+--------+---------------+--------------+--------------+
| Border | Start Content | Main Content | Button Group |
+--------+---------------+--------------+--------------+
```

- Border: based on `color` provided
- Start Content: based on `image` provided
- Main Content: based on `children` provided
- Button Group: based on `buttonGroup` provided

## Simple example

```js
<MeetingListItem>
  <div>Date</div>
</MeetingListItem>
```

## Complex example

```js
<MeetingListItem
  buttonGroup={
    <ButtonGroup spaced>
      <ButtonHyperlink>Link</ButtonHyperlink>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        17 <Icon autoScale name="participant-list" />
      </div>
      <ButtonPill color="join">Join</ButtonPill>
    </ButtonGroup>
  }
  color={MeetingMarker.AcceptedActive}
  image={<Avatar initials="TU" size={32} />}
>
  <div key="child1">Date</div>
  <div key="child2">Normal</div>
</MeetingListItem>
```