91 lines
1.7 KiB
TypeScript
91 lines
1.7 KiB
TypeScript
import styled from '@emotion/styled';
|
|
|
|
export type MessageEvent = {
|
|
id: number;
|
|
user: string;
|
|
time: string;
|
|
channel: string;
|
|
message: string;
|
|
agent?: string;
|
|
};
|
|
|
|
type OwnProps = {
|
|
message: MessageEvent;
|
|
};
|
|
|
|
const StyledMessage = styled.div`
|
|
display: flex;
|
|
margin-top: 12px;
|
|
margin-bottom: 20px;
|
|
`;
|
|
|
|
const StyledAvatar = styled.div`
|
|
display: flex;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 40px;
|
|
background: black;
|
|
font-size: 20px;
|
|
color: white;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
margin-right: 16px;
|
|
flex-shrink: 0;
|
|
`;
|
|
|
|
const StyledContent = styled.div``;
|
|
|
|
const StyledTitle = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
`;
|
|
|
|
const StyledUser = styled.div`
|
|
font-size: 16px;
|
|
color: black;
|
|
font-weight: bold;
|
|
`;
|
|
|
|
const StyledTime = styled.div`
|
|
margin-left: 8px;
|
|
font-size: 12px;
|
|
color: #2e3138;
|
|
`;
|
|
|
|
const StyledAgent = styled.div`
|
|
text-decoration: underline;
|
|
margin-left: 4px;
|
|
font-size: 12px;
|
|
color: #2e3138;
|
|
`;
|
|
|
|
const StyledDetails = styled.div`
|
|
margin-top: 8px;
|
|
`;
|
|
|
|
function Message({ message }: OwnProps) {
|
|
return (
|
|
<StyledMessage>
|
|
<StyledAvatar>
|
|
{message.user
|
|
.split(' ')
|
|
.map((n) => n[0])
|
|
.join('')}
|
|
</StyledAvatar>
|
|
<StyledContent>
|
|
<StyledTitle>
|
|
<StyledUser>{message.user}</StyledUser>
|
|
<StyledTime>
|
|
{message.time} ({message.channel})
|
|
</StyledTime>
|
|
{message.agent && <StyledAgent>by {message.agent}</StyledAgent>}
|
|
</StyledTitle>
|
|
<StyledDetails>{message.message}</StyledDetails>
|
|
</StyledContent>
|
|
</StyledMessage>
|
|
);
|
|
}
|
|
|
|
export default Message;
|