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 };