🛠️💅🏷️📕install button added

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}

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;
+    }
+  }
+`;