60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { Icon, IconType } from '@/components/Icon';
|
|
import { IconButton } from '@/components/IconButton';
|
|
import {
|
|
Disclosure,
|
|
DisclosureButton,
|
|
DisclosurePanel,
|
|
} from '@reach/disclosure';
|
|
import { FunctionComponent } from 'preact';
|
|
import { useState, useRef, useEffect } from 'react';
|
|
|
|
const DisclosureIconButton: FunctionComponent<{
|
|
className?: string;
|
|
icon: IconType;
|
|
}> = ({ className = '', icon }) => (
|
|
<DisclosureButton
|
|
className={`no-border cursor-pointer bg-transparent hover:brightness-130 p-0 ${
|
|
className ?? ''
|
|
}`}
|
|
>
|
|
<Icon type={icon} />
|
|
</DisclosureButton>
|
|
);
|
|
|
|
/**
|
|
* AuthAppInfoPopup is an info icon that shows a tooltip when clicked
|
|
* Tooltip is dismissible by clicking outside
|
|
*
|
|
* Note: it can be generalized but more use cases are required
|
|
* @returns
|
|
*/
|
|
export const AuthAppInfoTooltip: FunctionComponent = () => {
|
|
const [isShown, setShown] = useState(false);
|
|
const ref = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const dismiss = () => setShown(false);
|
|
document.addEventListener('mousedown', dismiss);
|
|
return () => {
|
|
document.removeEventListener('mousedown', dismiss);
|
|
};
|
|
}, [ref]);
|
|
|
|
return (
|
|
<Disclosure open={isShown} onChange={() => setShown(!isShown)}>
|
|
<div className="relative">
|
|
<DisclosureIconButton icon="info" className="mt-1" />
|
|
<DisclosurePanel>
|
|
<div
|
|
className={`bg-black color-white text-center rounded shadow-overlay
|
|
py-1.5 px-2 absolute w-103 -top-10 -left-51`}
|
|
>
|
|
Some apps, like Google Authenticator, do not back up and restore
|
|
your secret keys if you lose your device or get a new one.
|
|
</div>
|
|
</DisclosurePanel>
|
|
</div>
|
|
</Disclosure>
|
|
);
|
|
};
|