import { Meta } from '@storybook/addon-docs';
import ToasterExample from '../../ui/ToasterExample';

<Meta title="Toaster" />

# Toaster
This document covers how to use our toaster.

## How it works?
1. Add the `Toaster`

```jsx
// _app.ts
import { Toaster } from "@impact-market/ui";

// ...

<App>
    {/* ... */}
    <Toaster />
    {/* ... */}
</App>
```

2. Add the `toaster` component with the state and content required

```jsx
import { toast } from "@impact-market/ui";

// ...

toast.success('Success!');

toast.warning('Warning!');

toast.error('Error!');

toast.info(() => (
    <>
        <Display bold p600>Info!</Display>
        <Text mt={0.5}>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.
            Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel,
            nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget
            blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
        </Text>
    </>
));

```


## Try it
<ToasterExample />