Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 39 40 41 42 43 44 45 46 47 | 4x 4x 4x 4x 4x 4x 4x 4x 14x 13x 13x 13x 3x 1x 2x | import { AddToHomeScreen as AddToHomeScreenIcon } from '@mui/icons-material';
import { Box, Button, Fab, Snackbar } from '@mui/material';
import React from 'react';
import { useTranslation } from 'react-i18next';
import usePwa from 'use-pwa';
import { SectionFadeIn } from '@/components/elements';
export const AUTO_HIDE_DURATION = 5000;
export const Installer = () => {
const [t] = useTranslation();
const pwa = usePwa();
const [showAlternativeMessage, setShowAlternativeMessage] = React.useState(false);
return (
<>
{!pwa.isPwa && (
<Box sx={{ position: 'fixed', left: 24, bottom: 40, zIndex: 1, opacity: 0.75 }}>
<SectionFadeIn in={true}>
<Fab
onClick={pwa.enabledPwa ? pwa.showInstallPrompt : () => setShowAlternativeMessage(true)}
disabled={pwa.enabledPwa && !pwa.canInstallprompt}
sx={{ width: 40, height: 40 }}
data-testid="Installer__Fab"
>
<AddToHomeScreenIcon />
</Fab>
</SectionFadeIn>
</Box>
)}
<Snackbar
open={!!showAlternativeMessage}
message={t('installer.alternative')}
action={
<Button onClick={() => setShowAlternativeMessage(false)} size="small">
{t('installer.cancel')}
</Button>
}
onClose={() => setShowAlternativeMessage(false)}
autoHideDuration={AUTO_HIDE_DURATION}
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
data-testid="Installer__Snackbar"
/>
</>
);
};
|