RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 03:24:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

split modalCard

Browse Source
This commit is contained in:
srgooglo 2022-05-29 18:24:35 +02:00
parent db2c511e64
commit bba10b30e3
1 changed files with 45 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
packages/app/src/components/AboutApp/index.jsx
View File

@ -1,7 +1,7 @@
import React from "react" import React from "react"
import ReactDOM from "react-dom" import ReactDOM from "react-dom"
import * as antd from "antd" import * as antd from "antd"
import { Card, Mask } from "antd-mobile" import { Card as ACard, Mask as AMask } from "antd-mobile"
import { Icons } from "components/Icons" import { Icons } from "components/Icons"
import { DiReact } from "react-icons/di" import { DiReact } from "react-icons/di"
@ -10,7 +10,48 @@ import config from "config"
import "./index.less" import "./index.less"
export const AboutCard = (props) => { export const Card = (props) => {
const isProduction = import.meta.env.PROD
const isWSMainConnected = window.app.ws.mainSocketConnected
const WSMainOrigin = app.ws.sockets.main.io.uri
return <ACard
bodyClassName="aboutApp_card"
headerClassName="aboutApp_card_header"
title={
<div className="content">
<div className="branding">
<h2>{config.app.siteName}</h2>
<span>{config.author}</span>
<span> Licensed with {config.package?.license ?? "unlicensed"} </span>
</div>
<div>
<antd.Tag><Icons.Tag />v{window.app.version ?? "experimental"}</antd.Tag>
<antd.Tag color={isProduction ? "green" : "magenta"}>
{isProduction ? <Icons.CheckCircle /> : <Icons.Triangle />}
{String(import.meta.env.MODE)}
</antd.Tag>
</div>
</div>
}
>
<div className="group">
<h3><Icons.Globe />Server information</h3>
<div>
<antd.Tag color={isWSMainConnected ? "green" : "red"}><Icons.Cpu />{WSMainOrigin}</antd.Tag>
</div>
</div>
<div className="group">
<h3><Icons.GitMerge />Versions</h3>
<div>
<antd.Tag color="#ffec3d">eVite v{window.app.__eviteVersion ?? "experimental"}</antd.Tag>
<antd.Tag color="#61DBFB"><DiReact /> v{React.version ?? "experimental"}</antd.Tag>
</div>
</div>
</ACard>
}
export const ModalCard = (props) => {
const [visible, setVisible] = React.useState(false) const [visible, setVisible] = React.useState(false)
React.useEffect(() => { React.useEffect(() => {
@ -24,45 +65,9 @@ export const AboutCard = (props) => {
}, 150) }, 150)
} }
const isProduction = import.meta.env.PROD
const isWSMainConnected = window.app.ws.mainSocketConnected
const WSMainOrigin = app.ws.sockets.main.io.uri
return <Mask visible={visible} onMaskClick={() => close()}> return <Mask visible={visible} onMaskClick={() => close()}>
<div className="aboutApp_wrapper"> <div className="aboutApp_wrapper">
<Card <Card />
bodyClassName="aboutApp_card"
headerClassName="aboutApp_card_header"
title={
<div className="content">
<div className="branding">
<h2>{config.app.siteName}</h2>
<span>{config.author}</span>
</div>
<div>
<antd.Tag><Icons.Tag />v{window.app.version ?? "experimental"}</antd.Tag>
<antd.Tag color={isProduction ? "green" : "magenta"}>
{isProduction ? <Icons.CheckCircle /> : <Icons.Triangle />}
{String(import.meta.env.MODE)}
</antd.Tag>
</div>
</div>
}
>
<div className="group">
<h3><Icons.Globe />Server information</h3>
<div>
<antd.Tag color={isWSMainConnected ? "green" : "red"}><Icons.Cpu />{WSMainOrigin}</antd.Tag>
</div>
</div>
<div className="group">
<h3><Icons.GitMerge />Versions</h3>
<div>
<antd.Tag color="#ffec3d">eVite v{window.app.__eviteVersion ?? "experimental"}</antd.Tag>
<antd.Tag color="#61DBFB"><DiReact /> v{React.version ?? "experimental"}</antd.Tag>
</div>
</div>
</Card>
</div> </div>
</Mask > </Mask >
} }
@ -76,5 +81,5 @@ export function openModal() {
document.body.removeChild(component) document.body.removeChild(component)
} }
ReactDOM.render(<AboutCard onClose={onClose} />, component) ReactDOM.render(<ModalCard onClose={onClose} />, component)
} }