opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2026-03-13 07:59:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: add qrcode popover in setting modal

Browse Source
This commit is contained in:
steven
2023-03-29 17:35:35 +08:00
parent 13a6aa2a5c
commit 5ac06bb254
1 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/SettingModal.tsx
View File

@@ -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">