diff --git a/components/Button.tsx b/components/Button.tsx new file mode 100644 index 0000000..bdc8a92 --- /dev/null +++ b/components/Button.tsx @@ -0,0 +1,21 @@ +interface ButtonProps { + text?: string, + icon?: string, + onClick: () => void, +} + +function Button(props: ButtonProps): JSX.Element { + return ( + + { + props.icon && + } + {props.text} + + ) +} + +export default Button; \ No newline at end of file diff --git a/components/Form.tsx b/components/Form.tsx index 75b5505..1ba3c42 100644 --- a/components/Form.tsx +++ b/components/Form.tsx @@ -13,6 +13,7 @@ import {getPayloadBodyFromFile, getPayloadBodyFromQR} from "../src/process"; import {PassData} from "../src/pass"; import {COLORS} from "../src/colors"; import Colors from './Colors'; +import Button from './Button'; function Form(): JSX.Element { const {t} = useTranslation(['index', 'errors', 'common']); @@ -75,6 +76,29 @@ function Form(): JSX.Element { ) }, []); + // Whether Safari is used or not + let [isShareDialogAvailable, setIsShareDialogAvailable] = useState(false); + + // Check if share dialog is available + useEffect(() => { + setIsShareDialogAvailable(window.navigator && window.navigator.share !== undefined); + }, []); + + // Open share dialog + async function showShareDialog() { + const shareData = { + title: document.title, + text: t('common:title') + ' – ' + t('common:subtitle'), + url: window.location.protocol + "//" + window.location.host, + }; + + try { + await window.navigator.share(shareData); + } catch(error) { + setErrorMessage(error); + } + } + // Show file Dialog async function showFileDialog() { inputFile.current.click(); @@ -183,18 +207,8 @@ function Form(): JSX.Element { {t('index:selectCertificateDescription')} - - {isCameraOpen ? t('index:stopCamera') : t('index:startCamera')} - - - {t('index:openFile')} - + + }/> + { + errorMessage && setErrorMessage(undefined)}/> + } + + { + window.open('https://ko-fi.com/marvinsxtr', '_blank'); + }} /> + { + isShareDialogAvailable && + } + + }/> - { - errorMessage && setErrorMessage(undefined)}/> - } ) } diff --git a/components/Page.tsx b/components/Page.tsx index 3c39b8c..0a62b5e 100644 --- a/components/Page.tsx +++ b/components/Page.tsx @@ -25,7 +25,6 @@ function Page(props: PageProps): JSX.Element {
{t('index:selectCertificateDescription')}