diff --git a/src/App.js b/src/App.js index 2563cff..1293c7f 100644 --- a/src/App.js +++ b/src/App.js @@ -5,15 +5,25 @@ import Terminal from "./components/Terminal"; import Aside from "./layout/Aside"; import Github from "./components/Github"; import Settings from "./components/Settings"; +import Install from "./components/Install"; function App() { const [AllApps, setAllApps] = useState(false); const [Background, setBackground] = useState("default"); + const [deferredPrompt, setDeferredPrompt] = useState(); + const [currentApp, setCurrentApp] = useState(""); const [showTerminal, setShowTerminal] = useState(false); const [showGithub, setShowGithub] = useState(false); const [showSettings, setShowSettings] = useState(false); + const [showInstall, setShowInstall] = useState(false); + + window.addEventListener("beforeinstallprompt", (e) => { + e.preventDefault(); + setDeferredPrompt(e); + setShowInstall(true); + }); return ( @@ -38,6 +48,12 @@ function App() { />
setCurrentApp("")}>
+ { + deferredPrompt.prompt(); + deferredPrompt.userChoice.then((choiceResult) => { + if (choiceResult.outcome === "accepted") { + console.log("User accepted the A2HS prompt"); + } else { + console.log("User dismissed the A2HS prompt"); + setShowInstall(false); + } + setShowInstall(false); + }); + setDeferredPrompt(); + }; + + return ( + <> + {showInstall && ( + + + + )} + + ); +} + +const Container = styled.div` + position: absolute; + top: 10px; + left: 10px; + z-index: 2; + & > button { + padding: 12px; + font-size: 16px; + font-weight: 400; + color: var(--color-p); + background-color: transparent; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 4px; + border: none; + outline: none; + cursor: pointer; + & > span { + color: var(--color-p); + font-size: 32px; + } + &:hover { + background-color: var(--white-transparent); + backdrop-filter: 60px; + } + } +`;