Skip to content

Instantly share code, notes, and snippets.

@ramoncardena
Last active October 14, 2021 05:22
Show Gist options
  • Save ramoncardena/7ede9f561207f8ca0b866a73ce53d824 to your computer and use it in GitHub Desktop.
Save ramoncardena/7ede9f561207f8ca0b866a73ce53d824 to your computer and use it in GitHub Desktop.
React component - Message Box with boxColor, textColor and msgType props.
import React from 'react';
import styled from 'styled-components';
import { Icon } from 'react-icons-kit';
import { alertTriangle } from 'react-icons-kit/feather/alertTriangle';
import { info } from 'react-icons-kit/feather/info';
const Box = styled.div`
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
border: 2px solid ${props => props.color};
width: fit-content;
padding: 0.1rem 1rem;
color: ${props => props.color};
`;
const Sign = styled.div`
padding-right: 1rem;
`;
const Text = styled.p`
line-height: 1.5;
color: ${props => props.textColor};
`;
function MessageBox(props) {
return (
<Box color={props.boxColor}>
<Sign>
{}
{props.msgType === 'alert' && (
<Icon icon={alertTriangle} size={32} />
)}
{props.msgType === 'info' && <Icon icon={info} size={32} />}
</Sign>
<Text textColor={props.textColor}>{props.children}</Text>
</Box>
);
}
export default MessageBox;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment