67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import PeopleIcon from "@mui/icons-material/People";
|
|
import AddIcon from "@mui/icons-material/Add";
|
|
import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
|
|
import CircleIcon from "@mui/icons-material/Circle";
|
|
import Button from "@mui/material/Button";
|
|
import Grid from "@mui/material/Grid";
|
|
import { SidebarUserObj } from "../sidebar/SidebarUser";
|
|
import CallFavouritesDialog from "./CallFavouritesDialog";
|
|
import { useState } from "react";
|
|
|
|
interface Props {
|
|
users: SidebarUserObj[];
|
|
}
|
|
|
|
const ShortCuts: React.FC<Props> = ({ users }: Props) => {
|
|
const [open, setOpen] = useState(false);
|
|
const [selectedValue, setSelectedValue] = useState(users[0]);
|
|
|
|
const handleClickOpen = () => {
|
|
setOpen(true);
|
|
};
|
|
|
|
const handleClose = (value: SidebarUserObj) => {
|
|
setOpen(false);
|
|
setSelectedValue(value);
|
|
};
|
|
|
|
return (
|
|
<div className="short-cuts" >
|
|
<Grid className="row-1" container spacing={1}>
|
|
<Grid item sm={6}>
|
|
<Button className="tile">
|
|
<PeopleIcon className="icon" />
|
|
</Button>
|
|
<label>New Meeting</label>
|
|
</Grid>
|
|
<Grid item sm={6}>
|
|
<Button className="tile">
|
|
<AddIcon className="icon" />
|
|
</Button>
|
|
<label>Join</label>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid className="row-2" container spacing={1}>
|
|
<Grid item sm={6}>
|
|
<Button className="tile" onClick={handleClickOpen}>
|
|
<PhoneEnabledIcon className="icon" />
|
|
</Button>
|
|
<CallFavouritesDialog
|
|
selectedValue={selectedValue}
|
|
open={open}
|
|
onClose={handleClose}
|
|
users={users}/>
|
|
<label>Call Favourites</label>
|
|
</Grid>
|
|
<Grid item sm={6}>
|
|
<Button className="tile">
|
|
<CircleIcon className="icon" />
|
|
</Button>
|
|
<label>Recordings</label>
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ShortCuts; |