From e37605ed72ae8d7401ecf2d2498f73dd4620893a Mon Sep 17 00:00:00 2001
From: Akhlak Hossain Jim
 <73884856+Akhlak-Hossain-Jim@users.noreply.github.com>
Date: Mon, 22 Aug 2022 21:11:01 +0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=F0=9F=92=85=F0=9F=8F=B7?=
 =?UTF-8?q?=EF=B8=8F=F0=9F=93=95install=20button=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                | 16 +++++++++
 src/components/Install.js | 72 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 src/components/Install.js

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 (
     <HomeContainer background={Background}>
@@ -38,6 +48,12 @@ function App() {
         />
         <main>
           <div className="bg" onClick={() => setCurrentApp("")}></div>
+          <Install
+            deferredPrompt={deferredPrompt}
+            setDeferredPrompt={setDeferredPrompt}
+            setShowInstall={setShowInstall}
+            showInstall={showInstall}
+          />
           <Terminal
             showState={showTerminal}
             showApp={setShowTerminal}
diff --git a/src/components/Install.js b/src/components/Install.js
new file mode 100644
index 0000000..13b296d
--- /dev/null
+++ b/src/components/Install.js
@@ -0,0 +1,72 @@
+import React from "react";
+import styled from "styled-components";
+import { RiInstallFill } from "react-icons/ri";
+
+export default function Install({
+  deferredPrompt,
+  setDeferredPrompt,
+  setShowInstall,
+  showInstall,
+}) {
+  const handleClick = () => {
+    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 && (
+        <Container>
+          <button
+            className="modal_container__button_close"
+            onClick={handleClick}
+          >
+            <span>
+              <RiInstallFill style={{ color: "var(--color-p)" }} />
+            </span>
+            Install
+          </button>
+        </Container>
+      )}
+    </>
+  );
+}
+
+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;
+    }
+  }
+`;