5 changed files with 88 additions and 1 deletions
@ -0,0 +1,31 @@
@@ -0,0 +1,31 @@
|
||||
import { Modal } from 'antd'; |
||||
|
||||
interface Props { |
||||
title: string; |
||||
message: string; |
||||
} |
||||
|
||||
export default function FatalErrorStateModal(props: Props) { |
||||
const { title, message } = props; |
||||
|
||||
return ( |
||||
<Modal |
||||
title={title} |
||||
visible |
||||
footer={null} |
||||
closable={false} |
||||
keyboard={false} |
||||
width={900} |
||||
centered |
||||
className="modal" |
||||
> |
||||
<style global jsx>{` |
||||
.modal .ant-modal-content, |
||||
.modal .ant-modal-header { |
||||
background-color: var(--warning-color); |
||||
} |
||||
`}</style>
|
||||
<p>{message}</p> |
||||
</Modal> |
||||
); |
||||
} |
@ -0,0 +1,21 @@
@@ -0,0 +1,21 @@
|
||||
import React from 'react'; |
||||
import { ComponentStory, ComponentMeta } from '@storybook/react'; |
||||
import FatalErrorStateModal from '../components/modals/FatalErrorModal'; |
||||
|
||||
export default { |
||||
title: 'owncast/Modals/Global error state', |
||||
component: FatalErrorStateModal, |
||||
parameters: {}, |
||||
} as ComponentMeta<typeof FatalErrorStateModal>; |
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof FatalErrorStateModal> = args => ( |
||||
<FatalErrorStateModal {...args} /> |
||||
); |
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Example = Template.bind({}); |
||||
Example.args = { |
||||
title: 'Example error title', |
||||
message: 'Example error message', |
||||
}; |
Loading…
Reference in new issue