71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { Box, Button, IconButton, Typography } from "@mui/material";
|
|
import React from "react";
|
|
import PhoneIcon from "@mui/icons-material/Phone";
|
|
import VideocamIcon from "@mui/icons-material/Videocam";
|
|
import GroupsIcon from "@mui/icons-material/Groups";
|
|
import ContactInfo from "../../ContactInfo";
|
|
|
|
interface Props {
|
|
contactInfo: ContactInfo;
|
|
}
|
|
|
|
const UpperBody: React.FC<Props> = (props) => {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
border: 1,
|
|
borderRadius: 2,
|
|
width: "70%",
|
|
alignSelf: "center",
|
|
mb: 2,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-evenly",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Typography variant="h3">{props.contactInfo.name}</Typography>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
my: 2,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
ml: "5%",
|
|
}}
|
|
>
|
|
<IconButton sx={{ border: 1, mr: 1 }} size="large">
|
|
<PhoneIcon fontSize="large" />
|
|
</IconButton>
|
|
<IconButton sx={{ border: 1, mr: 1 }} size="large">
|
|
<VideocamIcon fontSize="large" />
|
|
</IconButton>
|
|
<IconButton sx={{ border: 1, mr: 1 }} size="large">
|
|
<GroupsIcon fontSize="large" />
|
|
</IconButton>
|
|
<Button variant="outlined" color="success">
|
|
Add to favorites
|
|
</Button>
|
|
</Box>
|
|
<Box sx={{ display: "flex", flexDirection: "column", ml: "10%" }}>
|
|
<Typography>{props.contactInfo.status}</Typography>
|
|
<Typography>MeetingName-1372</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default UpperBody;
|