54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
|
|
|
interface Props {
|
|
unAuthenticated?: boolean;
|
|
isSelf: boolean;
|
|
text: string;
|
|
createdAt: string;
|
|
}
|
|
|
|
export default function ChatMessage({
|
|
unAuthenticated = false,
|
|
isSelf,
|
|
text,
|
|
createdAt,
|
|
}: Props) {
|
|
const theme = useTheme();
|
|
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
|
|
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
gap: "9px",
|
|
padding: isSelf ? "0 8px 0 0" : "0 0 0 8px",
|
|
justifyContent: isSelf ? "end" : "start",
|
|
}}
|
|
>
|
|
<Typography sx={{
|
|
fontSize: "12px",
|
|
alignSelf: "end",
|
|
}}>
|
|
{new Date(createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
|
</Typography>
|
|
<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" sx={{ wordBreak: "break-word" }}>
|
|
{text}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|