Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 1x 1x | import { PropsWithClassName } from '@/shared/@types'
import { Story, Meta } from '@storybook/react'
import { useState } from 'react'
import { Button } from '../button/button'
import { Modal, ModalProps } from './modal'
export default {
title: 'Shared/Modal',
component: Modal,
argTypes: {
maskClosable: {
control: 'boolean',
defaultValue: false,
},
},
} as Meta
const Template: Story<PropsWithClassName<ModalProps>> = args => {
const [isOpen, setIsOpen] = useState(false)
return (
<>
<Button variant='outlined' onClick={() => setIsOpen(true)}>
Открыть
</Button>
<Modal
className='flex flex-col items-center text-center max-w-lg'
{...args}
isOpen={isOpen}
onClose={() => setIsOpen(false)}
>
<>
<h2 className='text-black mb-5'>Заголовок модального окна</h2>
<h4 className='text-text mb-10'>
Информация, описывающая содержимое модального окна или помогающая заполнить определенные данные
</h4>
<div className='grid grid-cols-2 text-center gap-5 w-full'>
<Button variant='outlined' color='secondary' size='large' fullWidth onClick={() => setIsOpen(false)}>
<h3>Действие 2</h3>
</Button>
<Button variant='contained' fullWidth>
<h3>Действие 1</h3>
</Button>
</div>
</>
</Modal>
</>
)
}
export const Default = Template.bind({})
Default.args = {}
|