63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import { Box, Button, List, Typography } from "@mui/material";
|
|
import React from "react";
|
|
import ContactInfo from "../../ContactInfo";
|
|
|
|
const meetings: { name: string; duration: string }[] = [
|
|
{ name: "Kanban Meeting", duration: "10:45 am - 11:45 am" },
|
|
{ name: "Design Meeting", duration: "10:45 am - 11:45 am" },
|
|
{ name: "Customer Meeting", duration: "10:45 am - 11:45 am" },
|
|
{ name: "Some kind of Meeting", duration: "10:45 am - 11:45 am" },
|
|
{ name: "Some kind of Meeting", duration: "10:45 am - 11:45 am" },
|
|
];
|
|
|
|
interface Props {
|
|
contactInfo: ContactInfo;
|
|
setMeetingInfoOpen: (open: boolean) => void;
|
|
}
|
|
|
|
const LowerBody: React.FC<Props> = (props) => {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
border: 1,
|
|
borderRadius: 2,
|
|
width: "70%",
|
|
height: "60%",
|
|
alignSelf: "center",
|
|
}}
|
|
>
|
|
<Typography variant="h4" textAlign="center">
|
|
Upcoming meetings
|
|
</Typography>
|
|
<List sx={{ maxHeight: "100%", overflow: "auto" }}>
|
|
{meetings.map((meeting, i) => (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
height: "50px",
|
|
px: "10px",
|
|
borderTop: 1,
|
|
borderBottom: i === meetings.length - 1 ? 1 : 0,
|
|
}}
|
|
key={i}
|
|
>
|
|
<Button
|
|
variant="text"
|
|
color="info"
|
|
onClick={() => props.setMeetingInfoOpen(true)}
|
|
>
|
|
{meeting.name}
|
|
</Button>
|
|
<Typography sx={{ pt: 1.5 }}>{meeting.duration}</Typography>
|
|
</Box>
|
|
))}
|
|
</List>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default LowerBody;
|