packages/components/containers/otherMailPreferences/KeyboardShortcut.tsx

   1 import { c } from 'ttag';
   2
   3 import Icon from '@proton/components/components/icon/Icon';
   4 import useModalState from '@proton/components/components/modalTwo/useModalState';
   5 import SettingsLayout from '@proton/components/containers/account/SettingsLayout';
   6 import SettingsLayoutLeft from '@proton/components/containers/account/SettingsLayoutLeft';
   7 import SettingsLayoutRight from '@proton/components/containers/account/SettingsLayoutRight';
   8 import ShortcutsToggle from '@proton/components/containers/general/ShortcutsToggle';
   9 import MailShortcutsModal from '@proton/components/containers/mail/MailShortcutsModal';
  10
  11 export const KeyboardShortcut = () => {
  12     const [mailShortcutsProps, setMailShortcutsModalOpen] = useModalState();
  13
  14     return (
  15         <>
  16             <SettingsLayout>
  17                 <SettingsLayoutLeft>
  18                     <label htmlFor="shortcutsToggle" className="flex-1">
  19                         <span className="text-semibold">{c('Title').t`Keyboard shortcuts`}</span>
  20                         <button
  21                             type="button"
  22                             className="ml-2 inline-flex relative interactive-pseudo-protrude interactive--no-background"
  23                             onClick={(e) => {
  24                                 e.preventDefault();
  25                                 setMailShortcutsModalOpen(true);
  26                             }}
  27                         >
  28                             <Icon
  29                                 className="color-primary"
  30                                 name="info-circle"
  31                                 alt={c('Action').t`More info: Keyboard shortcuts`}
  32                                 size={4}
  33                             />
  34                         </button>
  35                     </label>
  36                 </SettingsLayoutLeft>
  37                 <SettingsLayoutRight isToggleContainer>
  38                     <ShortcutsToggle className="mr-4" id="shortcutsToggle" />
  39                 </SettingsLayoutRight>
  40             </SettingsLayout>
  41             <MailShortcutsModal {...mailShortcutsProps} />
  42         </>
  43     );
  44 };