Add routing for call page
Enable buttons to start a call.
Improve ConversationListItem context menu layout.
Move calling buttons from `Button.tsx` to `CallButtons.tsx`.
Add CallProvider
GitLab: #78
Change-Id: I921aa11383bf39fae18e59b01afb00dc66b0d5e6
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index 2325ecb..9264355 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -15,7 +15,7 @@
* License along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*/
-import { QuestionMark } from '@mui/icons-material';
+import { QuestionMark, RadioButtonChecked, RadioButtonUnchecked } from '@mui/icons-material';
import { Box, ClickAwayListener, IconButton, IconButtonProps, Popper, SvgIconProps } from '@mui/material';
import { styled } from '@mui/material/styles';
import EmojiPicker, { IEmojiData } from 'emoji-picker-react';
@@ -26,32 +26,22 @@
Arrow3Icon,
ArrowIcon,
AudioCallIcon,
- CallEndIcon,
CameraIcon,
CameraInBubbleIcon,
CancelIcon,
- ChatBubbleIcon,
CrossedEyeIcon,
CrossIcon,
EmojiIcon,
- ExtensionIcon,
EyeIcon,
FolderIcon,
- FullscreenIcon,
- GroupAddIcon,
InfoIcon,
ListIcon,
- MicroIcon,
MicroInBubbleIcon,
PaperClipIcon,
PenIcon,
PeopleWithPlusSignIcon,
- RecordingIcon,
SaltireIcon,
- ScreenShareIcon,
VideoCallIcon,
- VideoCameraIcon,
- VolumeIcon,
} from './SvgIcon';
import CustomTooltip from './Tooltip';
@@ -157,81 +147,27 @@
},
}));
-export const CallingChatButton = (props: IconButtonProps) => {
- return (
- <IconButton {...props} aria-label="chat" sx={{ color: 'white' }}>
- <ChatBubbleIcon />
- </IconButton>
- );
+export type ToggleIconButtonProps = IconButtonProps & {
+ selected: boolean;
+ toggle: () => void;
+ IconOn?: ComponentType<SvgIconProps>;
+ IconOff?: ComponentType<SvgIconProps>;
};
-
-export const CallingEndButton = (props: IconButtonProps) => {
+export const ToggleIconButton = ({
+ IconOn = RadioButtonChecked,
+ IconOff = RadioButtonUnchecked,
+ selected,
+ toggle,
+ ...props
+}: ToggleIconButtonProps) => {
return (
- <IconButton {...props} aria-label="end call" sx={{ color: 'white', backgroundColor: 'red' }}>
- <CallEndIcon />
- </IconButton>
- );
-};
-
-export const CallingExtensionButton = (props: IconButtonProps) => {
- return (
- <IconButton {...props} aria-label="extensions" sx={{ color: 'white' }}>
- <ExtensionIcon />
- </IconButton>
- );
-};
-
-export const CallingFullscreenButton = (props: IconButtonProps) => {
- return (
- <IconButton {...props} aria-label="fullscreen" sx={{ color: 'white' }}>
- <FullscreenIcon />
- </IconButton>
- );
-};
-
-export const CallingGroupButton = (props: IconButtonProps) => {
- return (
- <IconButton {...props} aria-label="group options" sx={{ color: 'white' }}>
- <GroupAddIcon />
- </IconButton>
- );
-};
-
-export const CallingMicButton = (props: IconButtonProps) => {
- return (
- <IconButton {...props} aria-label="microphone options" sx={{ color: 'white' }}>
- <MicroIcon />
- </IconButton>
- );
-};
-
-export const CallingRecordButton = (props: IconButtonProps) => {
- return (
- <IconButton {...props} aria-label="recording options" sx={{ color: 'white' }}>
- <RecordingIcon />
- </IconButton>
- );
-};
-
-export const CallingScreenShareButton = (props: IconButtonProps) => {
- return (
- <IconButton {...props} aria-label="screen share" sx={{ color: 'white' }}>
- <ScreenShareIcon />
- </IconButton>
- );
-};
-
-export const CallingVideoCameraButton = (props: IconButtonProps) => {
- return (
- <IconButton {...props} aria-label="camera options" sx={{ color: 'white' }}>
- <VideoCameraIcon />
- </IconButton>
- );
-};
-export const CallingVolumeButton = (props: IconButtonProps) => {
- return (
- <IconButton {...props} aria-label="volume options" sx={{ color: 'white' }}>
- <VolumeIcon />
+ <IconButton
+ {...props}
+ onClick={() => {
+ toggle();
+ }}
+ >
+ {selected ? <IconOn /> : <IconOff />}
</IconButton>
);
};
diff --git a/client/src/components/CallButtons.tsx b/client/src/components/CallButtons.tsx
new file mode 100644
index 0000000..6cc3cb0
--- /dev/null
+++ b/client/src/components/CallButtons.tsx
@@ -0,0 +1,132 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program. If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { IconButton, IconButtonProps } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React, { useContext } from 'react';
+
+import { CallContext } from '../contexts/CallProvider';
+import { ToggleIconButton, ToggleIconButtonProps } from './Button';
+import {
+ CallEndIcon,
+ ChatBubbleIcon,
+ ExtensionIcon,
+ FullscreenIcon,
+ GroupAddIcon,
+ MicroIcon,
+ MicroOffIcon,
+ RecordingIcon,
+ ScreenShareIcon,
+ VideoCameraIcon,
+ VideoCameraOffIcon,
+ VolumeIcon,
+} from './SvgIcon';
+
+export const CallingChatButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="chat" sx={{ color: 'white' }}>
+ <ChatBubbleIcon />
+ </IconButton>
+ );
+};
+export const CallingEndButton = styled((props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="end call">
+ <CallEndIcon />
+ </IconButton>
+ );
+})(() => ({
+ color: 'white',
+ backgroundColor: 'red',
+ '&:hover': {
+ backgroundColor: 'darkred',
+ },
+}));
+export const CallingExtensionButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="extensions" sx={{ color: 'white' }}>
+ <ExtensionIcon />
+ </IconButton>
+ );
+};
+export const CallingFullscreenButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="fullscreen" sx={{ color: 'white' }}>
+ <FullscreenIcon />
+ </IconButton>
+ );
+};
+export const CallingGroupButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="group options" sx={{ color: 'white' }}>
+ <GroupAddIcon />
+ </IconButton>
+ );
+};
+export const CallingRecordButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="recording options" sx={{ color: 'white' }}>
+ <RecordingIcon />
+ </IconButton>
+ );
+};
+export const CallingScreenShareButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="screen share" sx={{ color: 'white' }}>
+ <ScreenShareIcon />
+ </IconButton>
+ );
+};
+export const CallingVolumeButton = (props: IconButtonProps) => {
+ return (
+ <IconButton {...props} aria-label="volume options" sx={{ color: 'white' }}>
+ <VolumeIcon />
+ </IconButton>
+ );
+};
+
+export const CallingMicButton = (props: Partial<ToggleIconButtonProps>) => {
+ const { micOn, setMicOn } = useContext(CallContext);
+
+ return (
+ <ToggleIconButton
+ aria-label="microphone options"
+ sx={{ color: 'white' }}
+ IconOn={MicroIcon}
+ IconOff={MicroOffIcon}
+ selected={micOn}
+ toggle={() => setMicOn((s) => !s)}
+ {...props}
+ />
+ );
+};
+
+export const CallingVideoCameraButton = (props: Partial<ToggleIconButtonProps>) => {
+ const { camOn, setCamOn } = useContext(CallContext);
+
+ return (
+ <ToggleIconButton
+ aria-label="camera options"
+ sx={{ color: 'white' }}
+ IconOn={VideoCameraIcon}
+ IconOff={VideoCameraOffIcon}
+ selected={camOn}
+ toggle={() => setCamOn((s) => !s)}
+ {...props}
+ />
+ );
+};
diff --git a/client/src/components/ConversationListItem.tsx b/client/src/components/ConversationListItem.tsx
index bab36b0..9dab62e 100644
--- a/client/src/components/ConversationListItem.tsx
+++ b/client/src/components/ConversationListItem.tsx
@@ -15,10 +15,21 @@
* License along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*/
-import { Box, ListItem, ListItemAvatar, ListItemText, Stack, StackProps, Typography } from '@mui/material';
+import {
+ Box,
+ ListItem,
+ ListItemAvatar,
+ ListItemIcon,
+ ListItemText,
+ Menu,
+ MenuItem,
+ Stack,
+ Typography,
+} from '@mui/material';
import { Conversation } from 'jami-web-common';
import { QRCodeCanvas } from 'qrcode.react';
import { MouseEvent, useState } from 'react';
+import { Trans } from 'react-i18next';
import Modal from 'react-modal';
import { useNavigate, useParams } from 'react-router-dom';
@@ -26,32 +37,8 @@
import { setRefreshFromSlice } from '../redux/appSlice';
import { useAppDispatch } from '../redux/hooks';
import ConversationAvatar from './ConversationAvatar';
-import { RemoveContactIcon, VideoCallIcon } from './SvgIcon';
-import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, CrossIcon, MessageIcon } from './SvgIcon';
-
-const customStyles: Modal.Styles = {
- content: {
- // right: "auto",
- // bottom: "auto",
- // // marginRight: "-50%",
- // transform: "translate(-50%, -50%)",
- // padding: "16px"
-
- // top: "1364px",
- left: '94px',
- width: '180px',
- height: '262px',
- background: '#FFFFFF 0% 0% no-repeat padding-box',
- boxShadow: '3px 3px 7px #00000029',
- borderRadius: '5px 20px 20px 20px',
- opacity: '1',
-
- textAlign: 'left',
- font: 'normal normal normal 12px/26px Ubuntu',
- letterSpacing: '0px',
- color: '#000000',
- },
-};
+import { CancelIcon, RemoveContactIcon, VideoCallIcon } from './SvgIcon';
+import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, MessageIcon } from './SvgIcon';
const cancelStyles: Modal.Styles = {
content: {
@@ -87,18 +74,6 @@
},
};
-const stackStyles: StackProps = {
- flexDirection: 'row',
- marginBottom: '4px',
- spacing: '40px',
- flex: 1,
- alignItems: 'center',
-};
-
-const iconTextStyle = {
- marginRight: '10px',
-};
-
const iconColor = '#005699';
type ConversationListItemProps = {
@@ -113,21 +88,21 @@
const isSelected = conversation.getDisplayUri() === pathId;
const navigate = useNavigate();
- const [modalIsOpen, setIsOpen] = useState(false);
+ const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null);
const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
const [modalDeleteIsOpen, setModalDeleteIsOpen] = useState(false);
const [blockOrRemove, setBlockOrRemove] = useState(true);
const [userId, setUserId] = useState(conversation?.getFirstMember()?.contact.getUri());
- const [isSwarm, setIsSwarm] = useState('true');
+ const [isSwarm, setIsSwarm] = useState(true);
- const openModal = (e: MouseEvent<HTMLDivElement>) => {
+ const openMenu = (e: MouseEvent<HTMLDivElement>) => {
e.preventDefault();
console.log(e);
- setIsOpen(true);
+ setMenuAnchorEl(e.currentTarget);
};
const openModalDetails = () => setModalDetailsIsOpen(true);
const openModalDelete = () => setModalDeleteIsOpen(true);
- const closeModal = () => setIsOpen(false);
+ const closeModal = () => setMenuAnchorEl(null);
const closeModalDetails = () => setModalDetailsIsOpen(false);
const closeModalDelete = () => setModalDeleteIsOpen(false);
@@ -170,97 +145,110 @@
const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${userId}`;
return (
- <div onContextMenu={openModal}>
+ <div onContextMenu={openMenu}>
<div>
- <Modal
- isOpen={modalIsOpen}
- // onAfterOpen={afterOpenModal}
- onRequestClose={closeModal}
- style={customStyles}
- contentLabel="Example Modal"
- >
- <Stack
+ <Menu open={!!menuAnchorEl} onClose={closeModal} anchorEl={menuAnchorEl}>
+ <MenuItem
onClick={() => {
navigate(`/account/${conversation.getAccountId()}/${uri}`);
closeModal();
}}
- {...stackStyles}
>
- <div style={{ ...iconTextStyle }}>
+ <ListItemIcon>
<MessageIcon style={{ color: iconColor }} />
- </div>
- Message
- </Stack>
- <Stack {...stackStyles}>
- <div style={{ ...iconTextStyle }}>
- <AudioCallIcon style={{ color: iconColor }} />
- </div>
- Démarrer appel audio
- </Stack>
-
- <Stack {...stackStyles}>
- <div style={{ ...iconTextStyle }}>
- <VideoCallIcon style={{ color: iconColor }} />
- </div>
- Démarrer appel vidéo
- </Stack>
-
- <Stack
- {...stackStyles}
+ </ListItemIcon>
+ <ListItemText>
+ <Trans i18nKey="conversation_message" />
+ </ListItemText>
+ </MenuItem>
+ <MenuItem
onClick={() => {
- navigate(`/account/${conversation.getAccountId()}/`);
- closeModal();
+ navigate(`/account/${conversation.getAccountId()}/call/${conversation.getId()}`);
}}
>
- <div style={{ ...iconTextStyle }}>
- <CrossIcon style={{ color: iconColor }} />
- </div>
- Fermer la conversation
- </Stack>
+ <ListItemIcon>
+ <AudioCallIcon style={{ color: iconColor }} />
+ </ListItemIcon>
+ <ListItemText>
+ <Trans i18nKey="conversation_start_audiocall" />
+ </ListItemText>
+ </MenuItem>
- <Stack
+ <MenuItem
+ onClick={() => {
+ navigate(`/account/${conversation.getAccountId()}/call/${conversation.getId()}?video=true`);
+ }}
+ >
+ <ListItemIcon>
+ <VideoCallIcon style={{ color: iconColor }} />
+ </ListItemIcon>
+ <ListItemText>
+ <Trans i18nKey="conversation_start_videocall" />
+ </ListItemText>
+ </MenuItem>
+
+ {isSelected && (
+ <MenuItem
+ onClick={() => {
+ navigate(`/account/${conversation.getAccountId()}/`);
+ closeModal();
+ }}
+ >
+ <ListItemIcon>
+ <CancelIcon style={{ color: iconColor }} />
+ </ListItemIcon>
+ <ListItemText>
+ <Trans i18nKey="conversation_close" />
+ </ListItemText>
+ </MenuItem>
+ )}
+
+ <MenuItem
onClick={() => {
console.log('open details contact for: ');
closeModal();
openModalDetails();
getContactDetails();
}}
- {...stackStyles}
>
- <div style={{ ...iconTextStyle }}>
+ <ListItemIcon>
<ContactDetailsIcon style={{ color: iconColor }} />
- </div>
- Détails de la conversation
- </Stack>
+ </ListItemIcon>
+ <ListItemText>
+ <Trans i18nKey="conversation_details" />
+ </ListItemText>
+ </MenuItem>
- <Stack
+ <MenuItem
onClick={() => {
setBlockOrRemove(true);
closeModal();
openModalDelete();
}}
- {...stackStyles}
>
- <div style={{ ...iconTextStyle }}>
+ <ListItemIcon>
<BlockContactIcon style={{ color: iconColor }} />
- </div>
- Bloquer le contact
- </Stack>
+ </ListItemIcon>
+ <ListItemText>
+ <Trans i18nKey="conversation_block_contact" />
+ </ListItemText>
+ </MenuItem>
- <Stack
+ <MenuItem
onClick={() => {
setBlockOrRemove(false);
closeModal();
openModalDelete();
}}
- {...stackStyles}
>
- <div style={{ ...iconTextStyle }}>
+ <ListItemIcon>
<RemoveContactIcon style={{ color: iconColor }} />
- </div>
- Supprimer contact
- </Stack>
- </Modal>
+ </ListItemIcon>
+ <ListItemText>
+ <Trans i18nKey="conversation_delete_contact" />
+ </ListItemText>
+ </MenuItem>
+ </Menu>
</div>
<div>
@@ -338,7 +326,7 @@
</div>
<Typography variant="caption">
- <div style={{ fontWeight: 'bold' }}> {isSwarm}</div>
+ <div style={{ fontWeight: 'bold' }}> {String(isSwarm)}</div>
</Typography>
</Stack>
</Stack>
diff --git a/client/src/components/ConversationView.tsx b/client/src/components/ConversationView.tsx
index a6c0d35..d4b8f90 100644
--- a/client/src/components/ConversationView.tsx
+++ b/client/src/components/ConversationView.tsx
@@ -19,6 +19,7 @@
import { Account, Conversation, ConversationMember, Message } from 'jami-web-common';
import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router';
import { SocketContext } from '../contexts/Socket';
import { useAccountQuery } from '../services/Account';
@@ -105,6 +106,7 @@
account={account}
members={conversation.getMembers()}
adminTitle={conversation.infos.title as string}
+ conversationId={conversationId}
/>
</Stack>
<Divider
@@ -130,12 +132,14 @@
type ConversationHeaderProps = {
account: Account;
+ conversationId: string;
members: ConversationMember[];
adminTitle: string | undefined;
};
-const ConversationHeader = ({ account, members, adminTitle }: ConversationHeaderProps) => {
+const ConversationHeader = ({ account, members, adminTitle, conversationId }: ConversationHeaderProps) => {
const { t } = useTranslation();
+ const navigate = useNavigate();
const title = useMemo(() => {
if (adminTitle) {
@@ -160,6 +164,14 @@
return translateEnumeration<ConversationMember>(members, options);
}, [account, members, adminTitle, t]);
+ const startCall = (withVideo = false) => {
+ let url = `/account/${account.getId()}/call/${conversationId}`;
+ if (withVideo) {
+ url += '?video=true';
+ }
+ navigate(url);
+ };
+
return (
<Stack direction="row">
<Stack flex={1} justifyContent="center" whiteSpace="nowrap" overflow="hidden">
@@ -168,8 +180,8 @@
</Typography>
</Stack>
<Stack direction="row" spacing="20px">
- <StartAudioCallButton />
- <StartVideoCallButton />
+ <StartAudioCallButton onClick={() => startCall(false)} />
+ <StartVideoCallButton onClick={() => startCall(true)} />
<AddParticipantButton />
<ShowOptionsMenuButton />
</Stack>
diff --git a/client/src/components/SvgIcon.tsx b/client/src/components/SvgIcon.tsx
index 92875b7..d300aa7 100644
--- a/client/src/components/SvgIcon.tsx
+++ b/client/src/components/SvgIcon.tsx
@@ -407,6 +407,33 @@
);
};
+export const MicroOffIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <g>
+ <path
+ d="M12,16.1c1.1,0,2.1-0.4,2.8-1.2c0.8-0.8,1.2-1.9,1.2-2.8V6c0-1.1-0.4-2.1-1.2-2.8c-1.5-1.5-4.2-1.5-5.8,0
+ C8.4,3.8,8,4.9,8,6v6.2c0,1.1,0.4,2.1,1.2,2.8C9.9,15.7,10.8,16.1,12,16.1z M9.4,6c0-0.7,0.3-1.3,0.8-1.9c0.5-0.5,1.1-0.8,1.9-0.8
+ c0.7,0,1.3,0.3,1.9,0.8c0.5,0.5,0.8,1.1,0.8,1.9v6.2c0,0.7-0.3,1.3-0.8,1.9c-1.1,1.1-2.7,1.1-3.6,0c-0.5-0.5-0.8-1.1-0.8-1.9
+ C9.4,12.1,9.4,6,9.4,6z"
+ />
+ <path
+ d="M18.6,8.8c-0.3-0.3-0.7-0.3-1.1,0c0,0.1-0.1,0.3-0.1,0.5v2.8c0,3.1-2.4,5.5-5.5,5.5s-5.5-2.4-5.5-5.5V9.3
+ c0-0.4-0.3-0.7-0.7-0.7l0,0c-0.1-0.1-0.3,0-0.4,0.1C5.1,8.9,5.1,9,5.1,9.3v2.8c0,3.5,2.7,6.4,6.2,6.8v1.7h-2
+ c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7h5.6c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7h-2.1V19c3.5-0.4,6.2-3.4,6.2-6.8
+ V9.3C18.9,9,18.9,9,18.6,8.8z"
+ />
+ </g>
+ <g>
+ <path
+ d="M5.5,21.9c-0.1,0-0.3,0-0.4-0.1c-0.3-0.3-0.4-0.7-0.3-1.1L17.7,2.6c0.3-0.3,0.7-0.4,1.1-0.3C19,2.6,19.1,3,19,3.4L6,21.6
+ C5.9,21.8,5.6,21.9,5.5,21.9z"
+ />
+ </g>
+ </SvgIcon>
+ );
+};
+
export const MicroInBubbleIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 25 25">
@@ -629,6 +656,24 @@
);
};
+export const VideoCameraOffIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <g id="Icones_Outline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+ <g id="Camera-Off" stroke="#ffffff" strokeWidth="1.5">
+ <line x1="4.5" y1="18.5" x2="15.5" y2="6.5" id="Line" strokeLinecap="round"></line>
+ <g id="Ico_Camera" transform="translate(3.000000, 5.000000)" fillRule="nonzero" strokeLinejoin="round">
+ <path
+ d="M17.739656,2.05124654 C17.62808,1.97368421 17.4421199,1.93490305 17.1817759,2.0900277 L13.4997675,4.41689751 L13.4997675,1.15927978 C13.4997675,0.849030471 13.3138075,0.5 12.7187355,0.5 L0.929800093,0.5 C0.371920037,0.538781163 0,0.810249307 0,1.19806094 L0,13.8407202 C0,14.2285319 0.371920037,14.5 0.929800093,14.5 L12.7559275,14.5 C13.3138075,14.5 13.5369596,14.1509695 13.5369596,13.8407202 L13.5369596,10.5831025 L17.2189679,12.9487535 C17.4421199,13.1038781 17.62808,13.065097 17.739656,12.9875346 C18,12.83241 18,12.5221607 18,12.4058172 L18,2.63296399 C18,2.5166205 18,2.20637119 17.739656,2.05124654 Z"
+ id="Path"
+ ></path>
+ </g>
+ </g>
+ </g>
+ </SvgIcon>
+ );
+};
+
export const VolumeIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 24 24">