diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-16 23:58:24 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-16 23:58:24 +0800 |
commit | c333d093b585fa0250a6973f2d396eb3cf227334 (patch) | |
tree | a00b3d77fb78c744ee0fee2b57ef25ce775b087d /packages/instant/src/components/sliding_error.tsx | |
parent | 1cfcc82ea9869e14c1a1b78e1376c89fdbeb91f4 (diff) | |
parent | 72f5719b3412da7840a7b85e4dce512ecbaece4d (diff) | |
download | dexon-sol-tools-c333d093b585fa0250a6973f2d396eb3cf227334.tar dexon-sol-tools-c333d093b585fa0250a6973f2d396eb3cf227334.tar.gz dexon-sol-tools-c333d093b585fa0250a6973f2d396eb3cf227334.tar.bz2 dexon-sol-tools-c333d093b585fa0250a6973f2d396eb3cf227334.tar.lz dexon-sol-tools-c333d093b585fa0250a6973f2d396eb3cf227334.tar.xz dexon-sol-tools-c333d093b585fa0250a6973f2d396eb3cf227334.tar.zst dexon-sol-tools-c333d093b585fa0250a6973f2d396eb3cf227334.zip |
merge development
Diffstat (limited to 'packages/instant/src/components/sliding_error.tsx')
-rw-r--r-- | packages/instant/src/components/sliding_error.tsx | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx new file mode 100644 index 000000000..0237fb7e9 --- /dev/null +++ b/packages/instant/src/components/sliding_error.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { SlideUpAndDownAnimation } from './animations/slide_up_and_down_animation'; + +import { Container, Text } from './ui'; + +export interface ErrorProps { + icon: string; + message: string; +} + +export const Error: React.StatelessComponent<ErrorProps> = props => ( + <Container + padding="10px" + border={`1px solid ${ColorOption.darkOrange}`} + backgroundColor={ColorOption.lightOrange} + width="100%" + borderRadius="6px" + marginBottom="10px" + > + <Container marginRight="5px" display="inline"> + {props.icon} + </Container> + <Text fontWeight="500" fontColor={ColorOption.darkOrange}> + {props.message} + </Text> + </Container> +); + +export const SlidingError: React.StatelessComponent<ErrorProps> = props => ( + <SlideUpAndDownAnimation downY="120px" delayMs={5000}> + <Error icon={props.icon} message={props.message} /> + </SlideUpAndDownAnimation> +); |