From 5ac06bb2545be19c9fb7b5f1e073f0c141f9e8bc Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Wed, 29 Mar 2023 17:35:35 +0800
Subject: [PATCH] chore: add qrcode popover in setting modal

---
 components/SettingModal.tsx | 40 +++++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/components/SettingModal.tsx b/components/SettingModal.tsx
index 04c9edf..47468f2 100644
--- a/components/SettingModal.tsx
+++ b/components/SettingModal.tsx
@@ -1,3 +1,4 @@
+import { Popover } from "@mui/material";
 import { useState } from "react";
 import { createPortal } from "react-dom";
 import Icon from "./Icon";
@@ -17,6 +18,8 @@ const SettingModal = (props: Props) => {
   const [state, setState] = useState<State>({
     showClearDataConfirmModal: false,
   });
+  const [wechatAnchorEl, setWeChatAnchorEl] = useState<HTMLElement | null>(null);
+  const openWeChatQrCodePopover = Boolean(wechatAnchorEl);
 
   const toggleClearDataConfirmModal = (show = true) => {
     setState({
@@ -34,14 +37,35 @@ const SettingModal = (props: Props) => {
             <Icon.IoMdClose className="w-5 h-auto" />
           </button>
           <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
-            <a
-              href="https://discord.gg/6R3qb32h"
-              className="w-auto px-4 py-2 rounded-full bg-indigo-600 text-white text-sm font-medium flex flex-row justify-center items-center hover:underline hover:shadow"
-              target="_blank"
-            >
-              <Icon.BsDiscord className="w-4 h-auto mr-1" />
-              Join Discord Channel
-            </a>
+            <div className="w-full flex flex-row justify-start items-start flex-wrap">
+              <a
+                href="https://discord.gg/6R3qb32h"
+                className="w-auto px-4 py-2 rounded-full bg-indigo-600 text-white text-sm font-medium flex flex-row justify-center items-center mr-2 mb-2 hover:underline hover:shadow"
+                target="_blank"
+              >
+                <Icon.BsDiscord className="w-4 h-auto mr-1" />
+                Join Discord Channel
+              </a>
+              <div
+                className="w-auto px-4 py-2 mr-2 mb-2 rounded-full cursor-pointer bg-green-600 text-white text-sm font-medium flex flex-row justify-center items-center hover:shadow"
+                onClick={(e) => setWeChatAnchorEl(e.currentTarget)}
+              >
+                <Icon.BsWechat className="w-4 h-auto mr-1" />
+                Join WeChat Group
+              </div>
+              <Popover
+                open={openWeChatQrCodePopover}
+                anchorEl={wechatAnchorEl}
+                onClose={() => setWeChatAnchorEl(null)}
+                anchorOrigin={{
+                  vertical: "bottom",
+                  horizontal: "left",
+                }}
+              >
+                <img className="w-64 h-auto" src="/wechat-qrcode.webp" alt="" />
+              </Popover>
+            </div>
+
             <h3>Danger Zone</h3>
             <div className="w-full border border-red-200 p-4 rounded-lg">
               <div className="w-full flex flex-row justify-between items-center gap-2">