opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-29 02:04:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update wechat qrcode view

Browse Source
This commit is contained in:
Steven
2023-03-29 20:25:42 +08:00
parent 9837ad5742
commit b089b24f22
2 changed files with 35 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/SettingModal.tsx
View File

@ -1,7 +1,7 @@
import { Popover } from "@mui/material";
import { useState } from "react"; import { useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import Icon from "./Icon"; import Icon from "./Icon";
import WeChatQRCodeView from "./WeChatQRCodeView";
import ClearDataConfirmModal from "./ClearDataConfirmModal"; import ClearDataConfirmModal from "./ClearDataConfirmModal";
interface Props { interface Props {
@ -18,8 +18,6 @@ const SettingModal = (props: Props) => {
const [state, setState] = useState<State>({ const [state, setState] = useState<State>({
showClearDataConfirmModal: false, showClearDataConfirmModal: false,
}); });
const [wechatAnchorEl, setWeChatAnchorEl] = useState<HTMLElement | null>(null);
const openWeChatQrCodePopover = Boolean(wechatAnchorEl);
const toggleClearDataConfirmModal = (show = true) => { const toggleClearDataConfirmModal = (show = true) => {
setState({ setState({
@ -46,24 +44,7 @@ const SettingModal = (props: Props) => {
<Icon.BsDiscord className="w-4 h-auto mr-1" /> <Icon.BsDiscord className="w-4 h-auto mr-1" />
Join Discord Channel Join Discord Channel
</a> </a>
<div <WeChatQRCodeView />
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> </div>
<h3>Danger Zone</h3> <h3>Danger Zone</h3>

33
components/WeChatQRCodeView.tsx Normal file
View File

@ -0,0 +1,33 @@
import { Popover } from "@mui/material";
import { useState } from "react";
import Icon from "./Icon";
const WeChatQRCodeView = () => {
const [wechatAnchorEl, setWeChatAnchorEl] = useState<HTMLElement | null>(null);
const openWeChatQrCodePopover = Boolean(wechatAnchorEl);
return (
<>
<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="wechat qrcode" />
</Popover>
</>
);
};
export default WeChatQRCodeView;