import styled from 'styled-components' // lib import * as styles from 'lib/styles/styles' import media from 'lib/styles/media' import palette from 'lib/styles/palette' import animations from 'lib/styles/animations' // types import SnackbarType from 'types/snackbar' const Snackbar = ({ onClick, text, type }: Props)=> { return ( {text} ); } const Container = styled.div<{ type: SnackbarType }>` position: relative; width: 320px; height: auto; max-height: 800px; background-color: ${({ type }) => { if (type === 'SUCCESS') { return palette.green4; } else if (type === 'WARNING') { return palette.orange4; } else if (type === 'ERROR') { return palette.red3; } else if (type === 'INFO') { return palette.blue4; } else { return palette.gray4; } } }; box-shadow: ${styles.boxShadow.regular}; border-radius: 4px; animation: ${animations.fadeInBottom} .3s cubic-bezier(0.25,0.1,0.25,1), ${animations.fadeOutBottom} .5s cubic-bezier(0.25,0.1,0.25,1) 3.6s; cursor: pointer; transition: .2s ${styles.transition}; ${styles.noselect}; &:active { transform: scale(.97, .97); } ${media.small} { border-radius: 0px; width: 100%; min-height: 1.8rem; } `; const Content = styled.div` position: relative; display: flex; width: 100%; height: auto; min-height: 2rem; box-sizing: border-box; padding: 12px 20px; ${media.small} { min-height: 1.6rem; line-height: 1.6rem; } `; const Message = styled.div` position: relative; flex-grow: 1; color: white; font-size: 14px; white-space: pre-wrap; word-break: keep-all; vertical-align: top; `; interface Props { onClick(e: React.MouseEvent): void; text: string; type: SnackbarType; } export default Snackbar