# components/MediaNav (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/MediaNav.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/MediaNav.tsx).

## Components

### `MediaNav`

Component.

Renders the previous / next chips (and the counter) over a set of media of two or more.

```ts
function MediaNav(props: MediaNavProps): Element | null
```

**Parameters**

- `props` (`MediaNavProps`): Component props: `index`, `count`, `onStep`, and whether to show the `counter`.

**Returns** `Element | null`

**Props**

- `className?` (`string`): Extra classes on each control.
- `count` (`number`): How many items there are. With fewer than two, nothing renders.
- `counter?` (`boolean`, default `false`): Also show the "n / N" chip, centred at the bottom.
- `index` (`number`): Position of the item on show, from 0.
- `onStep` (`(delta: -1 | 1) => void`): Steps to the previous (`-1`) or next (`1`) item.
- `style?` (`CSSProperties`): Inline styles on each control.

Source: [ui/src/components/MediaNav.tsx:40](https://github.com/Tahul/zidane/blob/main/ui/src/components/MediaNav.tsx#L40)

## Constants

### `MEDIA_CHIP`

Constant.

A round chip over media: the raised chip, which reads on a dark backdrop
(IconButton's transparent look would not), at 40px, a larger target than
IconButton's largest size. The lightbox's close button is one too.

```ts
const MEDIA_CHIP: 'zg-raised border absolute w-10 h-10 rounded-full text-[var(--zg-text)] flex items-center justify-center cursor-pointer p-0'
```

Source: [ui/src/components/MediaNav.tsx:16](https://github.com/Tahul/zidane/blob/main/ui/src/components/MediaNav.tsx#L16)

## Interfaces

### `MediaNavProps`

Interface.

Props for [`MediaNav`](https://zidane.si/docs/reference/ui-components-media-nav.md#MediaNav).

```ts
interface MediaNavProps
```

**Properties**

- `className?` (`string`): Extra classes on each control.
- `count` (`number`): How many items there are. With fewer than two, nothing renders.
- `counter?` (`boolean`, default `false`): Also show the "n / N" chip, centred at the bottom.
- `index` (`number`): Position of the item on show, from 0.
- `onStep` (`(delta: -1 | 1) => void`): Steps to the previous (`-1`) or next (`1`) item.
- `style?` (`CSSProperties`): Inline styles on each control.

Source: [ui/src/components/MediaNav.tsx:20](https://github.com/Tahul/zidane/blob/main/ui/src/components/MediaNav.tsx#L20)