45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
|
import { Box, Typography, useTheme } from "@mui/material";
|
||
|
|
import { TicketMessage } from "@root/model/ticket";
|
||
|
|
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
message: TicketMessage;
|
||
|
|
isSelf?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Message({ message, isSelf }: Props) {
|
||
|
|
const theme = useTheme();
|
||
|
|
|
||
|
|
const time = (
|
||
|
|
<Typography sx={{
|
||
|
|
fontSize: "12px",
|
||
|
|
alignSelf: "end",
|
||
|
|
}}>
|
||
|
|
{new Date(message.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||
|
|
</Typography>
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{
|
||
|
|
display: "flex",
|
||
|
|
justifyContent: isSelf ? "end" : "start",
|
||
|
|
gap: "6px",
|
||
|
|
}}>
|
||
|
|
{isSelf && time}
|
||
|
|
<Box sx={{
|
||
|
|
backgroundColor: "#2a2b2c",
|
||
|
|
p: "12px",
|
||
|
|
border: `1px solid ${theme.palette.golden.main}`,
|
||
|
|
borderRadius: "20px",
|
||
|
|
borderTopLeftRadius: isSelf ? "20px" : 0,
|
||
|
|
borderTopRightRadius: isSelf ? 0 : "20px",
|
||
|
|
maxWidth: "90%",
|
||
|
|
}}>
|
||
|
|
<Typography fontSize="14px">
|
||
|
|
{message.message}
|
||
|
|
</Typography>
|
||
|
|
</Box>
|
||
|
|
{!isSelf && time}
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|