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

     1  /* eslint-disable react/jsx-props-no-spreading */
     2  import React, { useState } from 'react';
     3  import ModalWithToggle from '@ui/Modals/ModalWithToggle';
     4  // import Button from '@ui/Button';
     5  import { ComponentMeta } from '@storybook/react';
     6  import '../webapp/sass/profile.scss';
     7  
     8  export default {
     9    title: 'Components/ModalWithToggle',
    10    component: ModalWithToggle,
    11  } as ComponentMeta<typeof ModalWithToggle>;
    12  
    13  export const Bacis = () => {
    14    const [isOpen, setOpenStatus] = useState(false);
    15  
    16    const handleOutsideClick = () => setOpenStatus(false);
    17    const props = {
    18      isModalOpen: isOpen,
    19      setModalOpenStatus: setOpenStatus,
    20      handleOutsideClick,
    21      toggleText: 'toggle text',
    22      headerEl: 'header element',
    23      leftSideEl: (
    24        <ul>
    25          <li>1</li>
    26          <li>2</li>
    27        </ul>
    28      ),
    29      rightSideEl: (
    30        <ul>
    31          <li>3</li>
    32          <li>4</li>
    33        </ul>
    34      ),
    35      footerEl: 'footer element or string',
    36    };
    37  
    38    return (
    39      <div style={{ paddingLeft: 400 }}>
    40        <ModalWithToggle {...props} />
    41      </div>
    42    );
    43  };
    44  
    45  export const WithHeaderAndFooterEl = () => {
    46    const [isOpen, setOpenStatus] = useState(false);
    47  
    48    const handleOutsideClick = () => setOpenStatus(false);
    49    const props = {
    50      isModalOpen: isOpen,
    51      setModalOpenStatus: setOpenStatus,
    52      handleOutsideClick,
    53      toggleText: 'toggle text',
    54      headerEl: (
    55        <>
    56          <h3>modal title</h3>
    57          <input type="text" />
    58        </>
    59      ),
    60      leftSideEl: (
    61        <ul>
    62          <li>1</li>
    63          <li>2</li>
    64        </ul>
    65      ),
    66      rightSideEl: (
    67        <ul>
    68          <li>3</li>
    69          <li>4</li>
    70        </ul>
    71      ),
    72      footerEl: <button>button</button>,
    73    };
    74  
    75    return (
    76      <div style={{ paddingLeft: 400 }}>
    77        <ModalWithToggle {...props} />
    78      </div>
    79    );
    80  };