add modal back

t9tio · Jul 8, 2019 · 90f851e · 90f851e
1 parent ca4835d
commit 90f851e
Showing 1 changed file with 107 additions and 0 deletions.
diff --git a/pages/components/ChatHero.js b/pages/components/ChatHero.js
@@ -52,6 +52,113 @@ function ChatHero({
 
   return (
     <div>
+      <div className={`modal ${isModalVisible ? 'is-active' : ''}`}>
+        <div className="modal-background" role="presentation" onClick={() => setIsModalVisible(false)} />
+        <div className="modal-content box">
+          <div className="">
+            <p className="title is-5 has-text-centered">
+              认领你在「&nbsp;
+              {groupName}
+              &nbsp;」的独到见解
+            </p>
+            <hr />
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Wechat Name</label>
+              </div>
+              <div className="field-body">
+                <div className="field is-narrow">
+                  <input className="input is-dark" onChange={e => onNameChange(e)} />
+                  <p className="help has-text-grey-light">Your messages will be higlighted</p>
+                </div>
+
+              </div>
+            </div>
+
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Email</label>
+              </div>
+              <div className="field-body">
+                <div className="field is-narrow">
+                  <input className="input is-dark" type="email" onChange={e => onEmailChange(e)} />
+                  <p className="help has-text-grey-light">
+                    Be notified of verification result and updates on wewe (
+                    <span className="has-text-danger">Private</span>
+                    )
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">About you</label>
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <div className="control">
+                    <input className="input is-dark" placeholder="Brief introduction of yourself" onChange={e => onIntroChange(e)} />
+                  </div>
+                  <p className="help has-text-grey-light">This will show up in your home page on wewe</p>
+                </div>
+              </div>
+            </div>
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">URL</label>
+              </div>
+              <div className="field-body">
+                <div className="field ">
+                  <p className="control is-expanded has-icons-left">
+                    <input className="input" type="url" placeholder="e.g. https://t9t.io (optional)" onChange={e => onUrlChange(e)} />
+                    <span className="icon is-small is-left">
+                      <i className="fas fa-link" />
+                    </span>
+                  </p>
+                  <p className="help has-text-grey-light">The link you want to share (social media account/blog/your product etc.)</p>
+                </div>
+              </div>
+            </div>
+
+            {/* <div className="field is-horizontal">
+              <div className="field-label">
+              &nbsp;
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <div className="control">
+                    <label className="label">
+                      Besides&nbsp;
+                      {groupName}
+                      .&nbsp;
+                      I am also a member of
+                    </label>
+                    <div className="control">
+                       <GroupCheckboxes currentGroup={groupName} />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div> */}
+            <div className="field is-horizontal">
+              <div className="field-label">
+              &nbsp;
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <div className="control">
+                    <button className="button is-success" type="button" onClick={submit}>
+                      Submit
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <button type="button" className="modal-close is-large" aria-label="close" onClick={() => setIsModalVisible(false)} />
+      </div>
       <div className="chat-hero">
         <p className="title is-5">
           <a href={`/chat/${groupName}`}>