import { Meta, Canvas, Story, SourceState } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Image } from "./Image";

<Meta title="Components/Images/Image" component={Image} />

<ComponentHeading
  componentName="Image"
  description="Provides an HTML img element"
  sourcePath="src/components/Image/Image.tsx"
  hideDemosLink
/>

## Installation

```jsx
import { Image } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Image">
    <Image src="http://placekitten.com/400/400" className="w-56" />
  </Story>
</Canvas>

## API

Extends `HTMLImageElement`