82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import {
|
|
Box,
|
|
List,
|
|
ListItem,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import React from "react";
|
|
import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
|
|
import DetailedMeeting from "../../../api-bodies/DetailedMeeting";
|
|
import { useAppSelector } from "../../../redux/hooks";
|
|
import { selectUsers } from "../../../redux/slices/usersSlice";
|
|
import { getMeetingStatus } from "../Utils";
|
|
import UserLite from "../../../api-bodies/UserLite";
|
|
|
|
interface Props {
|
|
meeting: DetailedMeeting;
|
|
}
|
|
|
|
const Body: React.FC<Props> = (props) => {
|
|
const registrants: UserLite[] = useAppSelector((state) =>
|
|
selectUsers(state, props.meeting.registrantIds)
|
|
);
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
width: "80%",
|
|
alignSelf: "center",
|
|
mt: 2,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "70%",
|
|
height: "100%",
|
|
}}
|
|
>
|
|
<Typography>Feb 10, 2022 10:45 am - 11:00 am</Typography>
|
|
<Typography>Status: {getMeetingStatus(props.meeting)}</Typography>
|
|
<Typography>
|
|
Topic: Lorem Ipsum is simply dummy text of the printing and
|
|
typesetting industry. Lorem Ipsum has been the industrys standard
|
|
dummy text ever since the 1500s. Topic: Lorem Ipsum is simply dummy
|
|
text of the printing and typesetting industry. Lorem Ipsum has been
|
|
the industrys standard dummy text ever since the 1500s.
|
|
</Typography>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
flexGrow: 1,
|
|
borderLeft: 1,
|
|
ml: 4,
|
|
}}
|
|
>
|
|
<List>
|
|
<ListItem sx={{ borderBottom: 1 }}>
|
|
<ListItemText primary="Invited" />
|
|
</ListItem>
|
|
{registrants.map((registrant, i) => (
|
|
<ListItem key={i}>
|
|
<ListItemIcon>
|
|
<PersonOutlineIcon />
|
|
</ListItemIcon>
|
|
<ListItemText primary={registrant.name} />
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Body;
|