# Evidence Compare

> Source: https://design.nanatec.co.ke/components/evidence-compare/
> Two photographs of the same thing, side by side, for a decision that rests on the difference — the kitchen at move-in and at move-out, a meter before and after a repair. Zoom and pan move both pictures together, so the same corner of each is always in view.
> Status: beta
> Since: v0.0.36

Each photograph carries what makes it evidence: when it was taken, by whom,
and any note left with it.

Zoom with the buttons, with `+` and `-`, with a pinch, or with Ctrl and the
wheel; drag or use the arrow keys to look around; `0` resets. A double click
zooms in on the point clicked.

## Preview

```html
<nana-evidence-compare
  label="Kitchen, Unit 4B"
  earlier='{"src":"https://images.pexels.com/photos/8146149/pexels-photo-8146149.jpeg?auto=compress&cs=tinysrgb&w=1200","alt":"Kitchen with white walls and clean wooden floor","label":"Move-in","takenAt":"2025-03-01T10:00:00Z","takenBy":"Agent"}'
  later='{"src":"https://images.pexels.com/photos/17139803/pexels-photo-17139803.jpeg?auto=compress&cs=tinysrgb&w=1200","alt":"Kitchen with damaged walls and debris on the floor","label":"Move-out","takenAt":"2026-09-30T15:20:00Z","takenBy":"Agent"}'
></nana-evidence-compare>
```

## Zooming

Both photographs share one view. Zoom in on the stain in the move-out picture
and the move-in picture shows the same patch of wall, at the same size.

| Input | Does |
|---|---|
| `+` / `-` buttons, `+` / `-` keys | Zoom about the centre |
| Ctrl + wheel, pinch | Zoom about the pointer |
| Double click | Zoom to 2× at the point, or back out |
| Drag, arrow keys | Look around once zoomed |
| `0`, the percentage button | Back to the whole picture |

The wheel alone still scrolls the page; zooming on it would trap a reader
scrolling past.

## Evidence shape

| Field | Meaning |
|---|---|
| `src`, `alt` | The photograph |
| `label` | What this side is — "Move-in", "After repair"; defaults to Before and After |
| `takenAt` | ISO time the photograph was taken |
| `takenBy` | Who took it |
| `note` | What they said about it |

Side by side when there is room, stacked when there is not; `layout` fixes
either.

Photographs on this page are from [Pexels](https://www.pexels.com): [move-in](https://www.pexels.com/photo/empty-kitchen-with-wooden-flooring-and-white-walls-8146149/) by Max Vakhtbovych, [move-out](https://www.pexels.com/photo/abandoned-ruined-kitchen-17139803/).

## Installation

```bash
npm install @nana-tec/ui-components
```

Or copy the source in and own it:

```bash
npx @nana-tec/ui add evidence-compare
```

## Usage

```js
import "@nana-tec/ui-components/evidence-compare";
```

```html
<nana-evidence-compare
  label="Kitchen, Unit 4B"
  earlier='{"src":"https://images.pexels.com/photos/8146149/pexels-photo-8146149.jpeg?auto=compress&cs=tinysrgb&w=1200","alt":"Kitchen with white walls and clean wooden floor","label":"Move-in","takenAt":"2025-03-01T10:00:00Z","takenBy":"Agent"}'
  later='{"src":"https://images.pexels.com/photos/17139803/pexels-photo-17139803.jpeg?auto=compress&cs=tinysrgb&w=1200","alt":"Kitchen with damaged walls and debris on the floor","label":"Move-out","takenAt":"2026-09-30T15:20:00Z","takenBy":"Agent"}'
></nana-evidence-compare>
```

```js
const el = document.querySelector("nana-evidence-compare");
el.addEventListener("nana-view-change", (e) => console.log(e.detail));
```

## API

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-evidence-compare--docs