63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
import { Box, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
|
|
import DownloadIcon from '@mui/icons-material/Download';
|
|
|
|
interface Props {
|
|
unAuthenticated?: boolean;
|
|
isSelf: boolean;
|
|
file: string;
|
|
createdAt: string;
|
|
}
|
|
|
|
export default function ChatDocument({
|
|
unAuthenticated = false,
|
|
isSelf,
|
|
file,
|
|
createdAt,
|
|
}: Props) {
|
|
const theme = useTheme();
|
|
|
|
const date = new Date(createdAt);
|
|
|
|
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%",
|
|
}}
|
|
>
|
|
<Link
|
|
|
|
download
|
|
href={`https://storage.yandexcloud.net/pair/${file}`}
|
|
style={{
|
|
color: "#7E2AEA",
|
|
display: "flex",
|
|
gap: "10px",
|
|
}}
|
|
>
|
|
<DownloadIcon/>
|
|
</Link>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|