# Music

Featured recordings, track rows and playlist collections.

- Group: Website
- Import: `import { MediaListRow } from '@misoto22/folio/website'`
- Page: https://ui.misoto22.com/components/music/

## When to reach for it

Present supplied listening data and playback controls without choosing a music service.

## Best practices

### Do

- Supply localized labels, descriptive links and meaningful image alternatives.

### Don’t

- Do not put service credentials, routing logic or backend models inside presentation components.

## MediaListRow

A ranked recording or artist, controlled by the host's one media player.

### Props

- `index` (required) — `number`.
- `artwork` — `ReactNode`.
- `title` (required) — `ReactNode`.
- `description` — `ReactNode`.
- `trailing` — `ReactNode`.
- `preview` (required) — `MediaPreviewAction`.
- `active` — `boolean` default `false`.
- `artworkShape` — `'square' | 'circle'` default `'square'`.

Also accepts: `Omit<HTMLAttributes<HTMLDivElement>, 'title'>`.

## MusicFeature

The same media feature geometry for playing, recent and unavailable recordings.

### Props

- `label` (required) — `string`.
- `title` (required) — `ReactNode`.
- `description` — `ReactNode`.
- `artwork` — `ReactNode`.
- `artworkFallback` (required) — `string`.
- `live` — `boolean` default `false`.
- `notice` — `string`.
- `action` — `ReactNode`.
- `progress` — `{ label: string; value: number; max: number; currentLabel: string; endLabel: string }`.

Also accepts: `Omit<HTMLAttributes<HTMLElement>, 'title'>`.

## MediaCollectionCard

A playlist, album or other media collection with one explicit preview action.

### Props

- `title` (required) — `ReactNode`.
- `artwork` — `ReactNode`.
- `tag` — `string | null`.
- `description` — `string | null`.
- `metadata` — `ReactNode`.
- `preview` (required) — `MediaPreviewAction`.

Also accepts: `Omit<HTMLAttributes<HTMLElement>, 'title'>`.

## MusicSection

A media list's heading, caption and collection layout.

### Props

- `title` (required) — `string`.
- `caption` — `string`.
- `children` (required) — `ReactNode`.
- `layout` — `'list' | 'collections'` default `'list'`.

Also accepts: `HTMLAttributes<HTMLElement>`.

## Example — recording and preview state

```tsx
import { MediaListRow, MusicFeature } from '@misoto22/folio/website'

<div className="w-full">
  <MusicFeature label="Selected recording" title="Morning light" description="The Field Ensemble"
    artworkFallback="Artwork unavailable" progress={{ label: 'Playback position', value: 42, max: 180, currentLabel: '0:42', endLabel: '3:00' }} />
  <MediaListRow index={1} title="Morning light" description="The Field Ensemble" trailing="3:00" active={playing}
    preview={{ label: playing ? 'Show paused state' : 'Show playing state', playing, onToggle: () => setPlaying((value) => !value) }} />
</div>
```