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

     1  import React, { useState } from 'react';
     2  import { ComponentMeta } from '@storybook/react';
     3  import {
     4    Dialog,
     5    DialogFooter,
     6    DialogHeader,
     7    DialogBody,
     8    DialogActions,
     9  } from '../webapp/javascript/ui/Dialog';
    10  import Button from '../webapp/javascript/ui/Button';
    11  import '../webapp/sass/profile.scss';
    12  
    13  export default {
    14    title: 'Components/Dialog',
    15    component: Dialog,
    16  } as ComponentMeta<typeof Dialog>;
    17  
    18  export function dialog() {
    19    const [open, setOpen] = useState(false);
    20  
    21    return (
    22      <>
    23        <Button onClick={() => setOpen(!open)}>Open Modal</Button>
    24        <Dialog
    25          aria-labelledby="dialog-header"
    26          open={open}
    27          onClose={() => {
    28            setOpen(false);
    29          }}
    30        >
    31          <>
    32            <DialogHeader closeable onClose={() => setOpen(false)}>
    33              <h3 id="dialog-header">I am the Header</h3>
    34            </DialogHeader>
    35            <DialogBody>
    36              <p>I am the body</p>
    37              <p>
    38                Phasellus at tellus iaculis nunc ornare porttitor vel at dolor.
    39                Donec ornare diam sit amet eros posuere, quis vestibulum nunc
    40                tempus. Vestibulum ante ipsum primis in faucibus orci luctus et
    41                ultrices posuere cubilia curae; Etiam ullamcorper luctus gravida.
    42                Quisque vitae euismod diam. Maecenas vulputate et massa hendrerit
    43                dignissim. Donec consequat nisi eu nisl laoreet tincidunt. Nullam
    44                dignissim ornare efficitur. Suspendisse at mollis dolor.
    45                Suspendisse luctus tellus ut metus pretium, sed blandit elit
    46                sagittis. Praesent arcu urna, consequat vel vehicula mattis,
    47                viverra nec erat. Vestibulum mattis vehicula arcu, quis iaculis
    48                dui elementum quis. In in massa tortor. Nullam volutpat nunc
    49                sapien, vel fringilla risus porta at.
    50              </p>
    51            </DialogBody>
    52            <DialogFooter>
    53              <DialogActions>
    54                <Button onClick={() => setOpen(false)}>Cancel</Button>
    55                <Button
    56                  autoFocus
    57                  onClick={() => {
    58                    setOpen(false);
    59                  }}
    60                  kind="secondary"
    61                >
    62                  Ok
    63                </Button>
    64              </DialogActions>
    65            </DialogFooter>
    66          </>
    67        </Dialog>
    68      </>
    69    );
    70  }