[Add] #2 モーダルなどの実装

yusakapon · Jul 3, 2022 · 67990e5 · 67990e5
1 parent e06e808
commit 67990e5
Show file tree

Hide file tree

Showing 5 changed files with 232 additions and 15 deletions.
diff --git a/frontend/viewer/components/TheHeader.js b/frontend/viewer/components/TheHeader.js
@@ -1,4 +1,5 @@
 // import Logo from './LogoTypeA.svg';
+import styles from '../styles/Home.module.css';
 
 export default function TheHeader({}) {
   return (

diff --git a/frontend/viewer/package-lock.json b/frontend/viewer/package-lock.json
diff --git a/frontend/viewer/package.json b/frontend/viewer/package.json
@@ -15,6 +15,7 @@
     "next": "12.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-modal": "^3.15.1",
     "web3": "^1.7.4"
   },
   "devDependencies": {

diff --git a/frontend/viewer/pages/article.js b/frontend/viewer/pages/article.js
@@ -1,10 +1,71 @@
 import Head from 'next/head';
 import Image from 'next/image';
+import { useState } from 'react';
+import Modal from 'react-modal';
 import styles from '../styles/Home.module.css';
 
 import TheHeader from '../components/TheHeader';
 
+// スタイリング
+const customStyles = {
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    backgroundColor: 'rgba(0,0,0,0.3)',
+  },
+
+  content: {
+    top: '50%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    maxWidth: '600px',
+    height: '300px',
+    transform: 'translate(-50%, -50%)',
+    zIndex: 200,
+  },
+};
+
 export default function article() {
+  const [modalIsOpen, setIsOpen] = useState(false);
+  const [chip, setChip] = useState(0);
+  const [isConnectWallet, setConnectWallet] = useState(false);
+
+  const handleChange = event => {
+    setChip(event.target.value);
+  };
+
+  const reactionUnit = () => {
+    if (isConnectWallet) {
+      return (
+        <div className={styles.modalInner}>
+          <button className={styles.reactionBtn}>Send Reaction</button>
+          <div className={styles.modalTip}>
+            <p className={styles.modalChip}>
+              <input type="number" value={chip} onChange={handleChange} /> MATIC
+            </p>
+            <button className={styles.donateBtn}>Give a tip</button>
+          </div>
+        </div>
+      );
+    } else {
+      return (
+        <div className={styles.modalConectWallet}>
+          <p className={styles.modalInnerMsg}>
+            Please connect wallet
+            <br />
+            to deliver reactions to the author.
+          </p>
+          <button className={styles.connectWalletBtn} onClick={() => setConnectWallet(true)}>
+            Connect Wallet
+          </button>
+        </div>
+      );
+    }
+  };
+
   return (
     <div className={styles.container}>
       <Head>
@@ -50,15 +111,22 @@ export default function article() {
         </div>
 
         <nav className={styles.reactionUnit}>
-          <button className={styles.connectWalletBtn}>Connect Wallet</button>
-        </nav>
-        <nav className={styles.reactionUnit}>
-          <button className={styles.reactionBtn}>Make Some Noise 👏</button>
-          <button className={styles.donateBtn}>Donate 💵</button>
+          <button className={styles.addReactionBtn} onClick={() => setIsOpen(true)}>
+            Add Reaction
+          </button>
         </nav>
       </main>
 
       <footer className={styles.footer}>Powered by xyzip</footer>
+
+      <Modal isOpen={modalIsOpen} style={customStyles}>
+        {reactionUnit()}
+        <div className={styles.modalFooter}>
+          <button className={styles.closeBtn} onClick={() => setIsOpen(false)}>
+            Close x
+          </button>
+        </div>
+      </Modal>
     </div>
   );
 }
diff --git a/frontend/viewer/styles/Home.module.css b/frontend/viewer/styles/Home.module.css
@@ -168,18 +168,103 @@
 }
 
 .connectWalletBtn,
-.reactionBtn,
-.donateBtn {
+.addReactionBtn,
+.donateBtn,
+.closeBtn,
+.reactionBtn {
   background: linear-gradient(to right, rgb(160, 235, 235), rgb(121, 206, 231)) border-box border-box;
   border: none;
   border-radius: 5em;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.14);
+  cursor: pointer;
   margin-bottom: 0.5rem;
   color: #fff;
   font-size: 1rem;
   font-weight: bold;
   padding: 1rem 2rem;
   text-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+  transition: all 800ms;
+}
+.connectWalletBtn:hover,
+.addReactionBtn:hover,
+.donateBtn:hover {
+  background: linear-gradient(to right, rgb(131, 196, 196), rgb(95, 164, 185)) border-box border-box;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
+  transition: all 200ms;
+}
+
+.reactionBtn {
+  background: linear-gradient(to right, rgb(128, 201, 223), rgb(204, 158, 235)) border-box border-box;
+  padding: 1rem 4rem;
+}
+.reactionBtn:hover {
+  background: linear-gradient(to right, rgb(109, 171, 190), rgb(180, 138, 207)) border-box border-box;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
+  transition: all 200ms;
+}
+
+.closeBtn {
+  background: #fff;
+  border: 1px solid #ccc;
+  box-shadow: none;
+  color: rgb(148, 148, 148);
+  text-shadow: none;
+}
+.closeBtn:hover {
+  background: rgb(212, 211, 211);
+}
+
+.donateBtn {
+  max-height: 50px;
+}
+
+.modalInner {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding-top: 1rem;
+}
+
+.modalTip,
+.modalConectWallet {
+  align-items: center;
+  display: flex;
+  padding: 0rem;
+  max-width: 400px;
+  margin: 0.5rem auto;
+}
+.modalTip {
+  width: 100%;
+}
+.modalConectWallet {
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 1rem 2rem 2rem;
+  text-align: center;
+  margin: 1rem auto;
+}
+.modalInnerMsg {
+  display: inline-block;
+  color: rgb(148, 148, 148);
+  font-size: 1rem;
+  width: 100%;
+}
+.modalChip {
+  margin-right: 1rem;
+  padding: 1rem;
+}
+.modalChip input {
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  font-size: 20px;
+  width: 6rem;
+  padding: 0.5rem;
+}
+.modalFooter {
+  display: flex;
+  justify-content: center;
 }
 
 .logo {