70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
|
import { Box, Typography } from "@mui/material";
|
||
|
|
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
isSelf: boolean;
|
||
|
|
text: string;
|
||
|
|
time: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Message({ isSelf, text, time }: Props) {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: "flex",
|
||
|
|
alignSelf: isSelf ? "end" : "start",
|
||
|
|
gap: "9px",
|
||
|
|
pl: isSelf ? undefined : "8px",
|
||
|
|
pr: isSelf ? "8px" : undefined,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Typography
|
||
|
|
sx={{
|
||
|
|
alignSelf: "end",
|
||
|
|
fontWeight: 400,
|
||
|
|
fontSize: "14px",
|
||
|
|
lineHeight: "17px",
|
||
|
|
order: isSelf ? 1 : 2,
|
||
|
|
color: "#9A9AAF",
|
||
|
|
mb: "-4px",
|
||
|
|
}}
|
||
|
|
>{time}</Typography>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
backgroundColor: isSelf ? "white" : "#9A9AAF",
|
||
|
|
border: "1px solid #9A9AAF",
|
||
|
|
order: isSelf ? 2 : 1,
|
||
|
|
p: "18px",
|
||
|
|
borderRadius: "8px",
|
||
|
|
maxWidth: "464px",
|
||
|
|
color: isSelf ? "#4D4D4D" : "white",
|
||
|
|
position: "relative",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
style={{
|
||
|
|
position: "absolute",
|
||
|
|
top: "-1px",
|
||
|
|
right: isSelf ? "-8px" : undefined,
|
||
|
|
left: isSelf ? undefined : "-8px",
|
||
|
|
transform: isSelf ? undefined : "scale(-1, 1)",
|
||
|
|
}}
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="8"
|
||
|
|
viewBox="0 0 16 8"
|
||
|
|
fill="none"
|
||
|
|
>
|
||
|
|
<path d="M0.5 0.5L15.5 0.500007
|
||
|
|
C10 0.500006 7.5 8 7.5 7.5H7.5H0.5V0.5Z"
|
||
|
|
fill={isSelf ? "white" : "#9A9AAF"}
|
||
|
|
stroke="#9A9AAF"
|
||
|
|
/>
|
||
|
|
<rect y="1" width="8" height="8" fill={isSelf ? "white" : "#9A9AAF"} />
|
||
|
|
</svg>
|
||
|
|
<Typography>{text}</Typography>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|