github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/stories/Notifications.stories.tsx (about)

     1  import React from 'react';
     2  import Notifications, { store } from '@ui/Notifications';
     3  import Button from '@ui/Button';
     4  import '../webapp/sass/profile.scss';
     5  
     6  export default {
     7    title: 'components/Notifications',
     8  };
     9  
    10  export const notifications = () => {
    11    const info = () =>
    12      store.addNotification({
    13        title: 'Info',
    14        message: 'Info message',
    15        type: 'info',
    16      });
    17  
    18    const danger = () =>
    19      store.addNotification({
    20        title: 'Danger',
    21        message: 'Danger message',
    22        type: 'danger',
    23      });
    24  
    25    const success = () =>
    26      store.addNotification({
    27        title: 'Success',
    28        message: 'Success message',
    29        type: 'success',
    30      });
    31  
    32    const warning = () =>
    33      store.addNotification({
    34        title: 'Warning',
    35        message: 'Warning message',
    36        type: 'warning',
    37      });
    38  
    39    const arbitraryJSXElement = () =>
    40      store.addNotification({
    41        title: 'Info',
    42        message: (
    43          <>
    44            Info message <a href="">i am a link</a>
    45          </>
    46        ),
    47        type: 'info',
    48      });
    49  
    50    return (
    51      <div>
    52        <Button onClick={() => info()}>Info</Button>
    53        <Button onClick={() => danger()}>Danger</Button>
    54        <Button onClick={() => success()}>Success</Button>
    55        <Button onClick={() => warning()}>Warning</Button>
    56        <Button onClick={() => arbitraryJSXElement()}>
    57          Arbitrary JSX Element
    58        </Button>
    59        <Notifications />
    60      </div>
    61    );
    62  };