feat: PWA prompt

2022-05-11 22:25:07 +08:00
parent 5728cae112
commit 360575bc08
6 changed files with 157 additions and 8 deletions
@@ -0,0 +1,58 @@
+// import React from "react";
+import styled from "styled-components";
+import Modal from "../Modal";
+import Button from "../../component/styled/Button";
+
+const Styled = styled.div`
+  margin-top: 15px;
+  pointer-events: all;
+  width: 300px;
+  padding: 16px 32px;
+  border-radius: 6px;
+  background: #fff;
+  box-shadow: 0px 25px 50px rgba(31, 41, 55, 0.25);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  .tip {
+    line-height: 1.4;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    color: #333;
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .desc {
+      font-size: 12px;
+      color: #666;
+    }
+  }
+  .btns {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+`;
+export default function Prompt({ handleInstall, closePrompt }) {
+  return (
+    <Modal mask={false}>
+      <Styled>
+        <div className="tip">
+          <h2 className="title">Add this Web APP</h2>
+          <p className="desc">Add to your PC and open like native APP</p>
+        </div>
+        <div className="btns">
+          <Button className="main small" onClick={handleInstall}>
+            Install
+          </Button>
+          <Button className="ghost small" onClick={closePrompt}>
+            Cancel
+          </Button>
+        </div>
+      </Styled>
+    </Modal>
+  );
+}