packages/components/containers/general/ShortcutsSection.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import Field from '@proton/components/components/container/Field';
   5 import Row from '@proton/components/components/container/Row';
   6 import Label from '@proton/components/components/label/Label';
   7
   8 import ShortcutsToggle from './ShortcutsToggle';
   9
  10 interface Props {
  11     onOpenShortcutsModal: () => void;
  12 }
  13
  14 const ShortcutsSection = ({ onOpenShortcutsModal }: Props) => {
  15     return (
  16         <Row>
  17             <Label htmlFor="shortcutsToggle">{c('Title').t`Keyboard shortcuts`}</Label>
  18             <Field className="pt-2">
  19                 <div>
  20                     <ShortcutsToggle className="mr-4" id="shortcutsToggle" />
  21                 </div>
  22                 <div className="mt-4">
  23                     <Button size="small" onClick={onOpenShortcutsModal}>{c('Action')
  24                         .t`Display keyboard shortcuts`}</Button>
  25                 </div>
  26             </Field>
  27         </Row>
  28     );
  29 };
  30
  31 export default ShortcutsSection;