import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks"
import * as IntroStories from "./Intro.stories"

<Meta of={IntroStories} />

# Intro Banner

A banner component that displays an image, a title and other children nodes.

This is used as the introduction banner in React apps such as the Research Bank
or the Blue Pacific Dashboard.

## Usage

<Canvas>
    <Story of={IntroStories._IntroBanner} />
</Canvas>

## Props

-   `src` (string, required): URL of the banner image
-   `title` (string, required): Title text for the banner
-   `children` (React.ReactNode): Content to display in banner

## Examples

```jsx
<IntroBanner src="image-url" title="Banner Title">
    <p>Your content here</p>
</IntroBanner>
```