49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
|
import date from 'date-and-time'
|
||
|
|
import { User } from 'utils/authentication'
|
||
|
|
|
||
|
|
export interface MessageHeaderProps {
|
||
|
|
user: User
|
||
|
|
createdAt: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export const MessageHeader: React.FC<MessageHeaderProps> = (props) => {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<h2 className='message-header'>
|
||
|
|
<span className='username'>{props.user.name}</span>
|
||
|
|
<span className='date'>
|
||
|
|
{date.format(new Date(props.createdAt), 'DD/MM/YYYY - HH:mm:ss')}
|
||
|
|
</span>
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<style jsx>
|
||
|
|
{`
|
||
|
|
.message-header {
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
line-height: 1.375rem;
|
||
|
|
min-height: 1.375rem;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
.username {
|
||
|
|
font-family: 'Poppins', 'Arial', 'sans-serif';
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--color-secondary);
|
||
|
|
margin-right: 0.25rem;
|
||
|
|
}
|
||
|
|
.date {
|
||
|
|
font-family: 'Poppins', 'Arial', 'sans-serif';
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 400;
|
||
|
|
margin-left: 1em;
|
||
|
|
color: var(--color-tertiary);
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|