norma-library
Version:
Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
63 lines • 2.72 kB
JavaScript
import React from 'react';
import { Box, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
var Item = styled(Box)(function (_a) {
var orient = _a.orient;
return ({
borderColor: '#ccc',
display: 'flex',
position: 'relative',
width: '100%',
justifyContent: orient === 'replay' ? 'flex-end' : 'flex-start',
marginBottom: '10px',
alignItems: 'center',
});
});
var ContainerStyled = styled(Box)({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
minWidth: '640px',
backgroundColor: '#F0F0F0',
padding: '10px',
});
var BoxStyled = styled(Box)(function (_a) {
var orient = _a.orient;
return ({
width: '70%',
backgroundColor: orient === 'replay' ? '#E18B50' : '#FFF',
color: orient === 'replay' ? '#FFF' : '#4D4F5C',
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
borderBottomLeftRadius: orient === 'me' ? 2 : 30,
borderBottomRightRadius: orient === 'me' ? 30 : 2,
marginLeft: orient === 'replay' ? '10px' : 0,
marginRight: orient === 'me' ? '10px' : 0,
padding: 20,
});
});
export var ChatMessage = function (_a) {
var data = _a.data;
return (React.createElement(ContainerStyled, null, data.map(function (item, key) { return (React.createElement(Item, { key: key, orient: item.send },
item.emotion && item.send === 'replay' && React.createElement(React.Fragment, null, item.emotion),
React.createElement(BoxStyled, { orient: item.send },
React.createElement(Typography, { variant: "subtitle2", style: {
marginBottom: '5px',
font: 'normal normal 600 16px/20px Source Sans Pro',
} }, item.name),
React.createElement(Typography, { variant: "body1", style: {
font: 'normal normal normal 16px/20px Source Sans Pro',
} }, item.message),
React.createElement(Typography, { variant: "caption", style: {
position: 'absolute',
bottom: '-18px',
left: item.send === 'me' ? 0 : 'auto',
right: item.send === 'me' ? 'auto' : 0,
font: 'normal normal normal 11px/13px Source Sans Pro',
opacity: 0.5,
color: '#4D4F5C',
} }, item.time)),
item.emotion && item.send === 'me' && React.createElement(React.Fragment, null, item.emotion),
item.emotionReplay && item.send === 'me' && React.createElement(React.Fragment, null, item.emotionReplay))); })));
};
//# sourceMappingURL=ChatMessage.js.map