-
Notifications
You must be signed in to change notification settings - Fork 175
/
UnMatchedModuleWarning.tsx
40 lines (37 loc) · 1.07 KB
/
UnMatchedModuleWarning.tsx
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
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import {
DIRECTION_COLUMN,
Flex,
SPACING,
StyledText,
TYPOGRAPHY,
} from '@opentrons/components'
import { Banner } from '../../../../atoms/Banner'
export const UnMatchedModuleWarning = (): JSX.Element | null => {
const { t } = useTranslation('protocol_setup')
const [showBanner, setShowBanner] = React.useState<boolean>(true)
if (!showBanner) return null
return (
<Banner
iconMarginRight={SPACING.spacing16}
iconMarginLeft={SPACING.spacing8}
type="warning"
size={SPACING.spacing20}
onCloseClick={() => setShowBanner(false)}
>
<Flex flexDirection={DIRECTION_COLUMN}>
<StyledText
as="p"
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
data-testid="UnMatchedModuleWarning_title"
>
{t('extra_module_attached')}
</StyledText>
<StyledText as="p" data-testid="UnMatchedModuleWarning_body">
{`${t('module_mismatch_body')}.`}
</StyledText>
</Flex>
</Banner>
)
}