41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
|
import { memo } from 'react'
|
||
|
|
|
||
|
|
import { MessageContent } from './MessageContent'
|
||
|
|
import { MessageHeader } from './MessageHeader'
|
||
|
|
import { UserAvatar } from './UserAvatar'
|
||
|
|
import { Message as MessageProps } from 'contexts/Messages'
|
||
|
|
|
||
|
|
export const Message: React.FunctionComponent<MessageProps> = memo((props) => {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className='message'>
|
||
|
|
<UserAvatar user={props.user} />
|
||
|
|
<MessageHeader createdAt={props.createdAt} user={props.user} />
|
||
|
|
<MessageContent
|
||
|
|
value={props.value}
|
||
|
|
type={props.type}
|
||
|
|
mimetype={props.mimetype}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style jsx>
|
||
|
|
{`
|
||
|
|
.message:hover {
|
||
|
|
background-color: var(--color-background-tertiary);
|
||
|
|
}
|
||
|
|
.message {
|
||
|
|
transition: background-color 0.15s ease-in-out;
|
||
|
|
margin-top: 2.3rem;
|
||
|
|
min-height: 2.75rem;
|
||
|
|
padding-left: 72px;
|
||
|
|
position: relative;
|
||
|
|
word-wrap: break-word;
|
||
|
|
flex: 0 0 auto;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
})
|