summaryrefslogtreecommitdiffhomepage
path: root/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx
blob: 0fe11501397156453a1c818740c78026b5b8071a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import { messages } from '../../shared/gettext';
import { Button, IconButton, IconButtonProps } from '../lib/components';
import { useBoolean } from '../lib/utility-hooks';
import { ModalAlert, ModalAlertType } from './Modal';

export interface InfoButtonProps extends Omit<IconButtonProps, 'icon'> {
  title?: string;
  message?: string | Array<string>;
  children?: React.ReactNode;
}

export default function InfoButton({ title, message, children, ...props }: InfoButtonProps) {
  const [isOpen, show, hide] = useBoolean(false);

  return (
    <>
      <IconButton
        onClick={show}
        aria-label={messages.pgettext('accessibility', 'More information')}
        {...props}>
        <IconButton.Icon icon="info-circle" />
      </IconButton>
      <ModalAlert
        isOpen={isOpen}
        title={title}
        message={message}
        type={ModalAlertType.info}
        buttons={[
          <Button key="back" onClick={hide}>
            <Button.Text>{messages.gettext('Got it!')}</Button.Text>
          </Button>,
        ]}
        close={hide}>
        {children}
      </ModalAlert>
    </>
  );
}