Add install button

components/Frontpage.tsx

@@ -1,4 +1,5 @@
 import AccessTimeIcon from '@mui/icons-material/AccessTime'
+import AddBoxIcon from '@mui/icons-material/AddBox'
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'
 import SettingsIcon from '@mui/icons-material/Settings'
 import {
@@ -15,6 +16,7 @@ import Typography from '@mui/material/Typography'
 import Image from 'next/image'
 import Link from 'next/link'
 import * as React from 'react'
+import { usePWAInstall } from 'react-use-pwa-install'
 import logo from '../public/images/app-icon/favicon.svg'
 import { CreateCustomForm } from './CreateCustomForm'
 
@@ -36,6 +38,8 @@ export const Frontpage: React.FunctionComponent = () => {
 
 	const dynamicPresets = React.useMemo(() => ['1', '2', '3'], [])
 
+	const install = usePWAInstall()
+
 	return (
 		<Box paddingTop={4} paddingBottom={4}>
 			<Container maxWidth="xs">
@@ -93,11 +97,31 @@ export const Frontpage: React.FunctionComponent = () => {
 					Create custom controlled
 				</Typography>
 				<CreateCustomForm />
-				<Box paddingBottom={10} />
-				<Typography variant="h5" component="h2" gutterBottom>
-					Donate
-				</Typography>
+				<Box paddingBottom={4} />
 				<List>
+					<ListItem
+						disablePadding
+						style={
+							Boolean(install)
+								? undefined
+								: {
+										opacity: 0,
+										visibility: 'hidden',
+								  }
+						}
+					>
+						<ListItemButton
+							onClick={() => {
+								install()
+							}}
+							disabled={!install}
+						>
+							<ListItemIcon>
+								<AddBoxIcon />
+							</ListItemIcon>
+							<ListItemText primary="Install Just Countdown" />
+						</ListItemButton>
+					</ListItem>
 					<ListItem disablePadding>
 						<ListItemButton
 							component={Link}
@@ -106,7 +130,7 @@ export const Frontpage: React.FunctionComponent = () => {
 							<ListItemIcon>
 								<FavoriteBorderIcon />
 							</ListItemIcon>
-							<ListItemText primary="filipchalupa.cz" />
+							<ListItemText primary="Donate to filipchalupa.cz" />
 						</ListItemButton>
 					</ListItem>
 				</List>

package.json

@@ -32,6 +32,7 @@
 		"firebase": "^9.15.0",
 		"react-intersection-observer": "^9.4.1",
 		"react-keep-awake": "^0.0.3",
+		"react-use-pwa-install": "^0.2.4",
 		"sass": "^1.71.1",
 		"use-chromecast-caf-receiver": "^0.0.3",
 		"use-chromecast-caf-sender": "^0.0.5",