import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ImageZoom from '../ImageZoom';

<Meta title="Atoms/ImageZoom" component={ImageZoom} />

# Image
<br />

## `ImageZoom` is a wrapper around the Image atom, that adds a zoom widget to the image on hover, on desktop.
<br />

### Image Zoom
<Canvas>
    <Story name="Image Zoom">
        <div style={{ width: '300px' }}>
            <ImageZoom
                src="https://picsum.photos/id/1011/1200/1500"
            />
        </div>
    </Story>
</Canvas>


## Usage Example

```jsx
import ImageZoom from '@appdirect/sfb-theme-components/src/atoms/image-zoom/ImageZoom';

<ImageZoom
    src="https://picsum.photos/id/1011/1200/1500"
/>
```
## Props

<ArgsTable of={ImageZoom} />
