split modalCard

packages/app/src/components/AboutApp/index.jsx

@@ -1,7 +1,7 @@
 import React from "react"
 import ReactDOM from "react-dom"
 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 { DiReact } from "react-icons/di"
@@ -10,27 +10,12 @@ import config from "config"
 
 import "./index.less"
 
-export const AboutCard = (props) => {
+export const Card = (props) => {
-	const [visible, setVisible] = React.useState(false)
-
-	React.useEffect(() => {
-		setVisible(true)
-	}, [])
-
-	const close = () => {
-		setVisible(false)
-		setTimeout(() => {
-			props.onClose()
-		}, 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 <ACard
-		<div className="aboutApp_wrapper">
-			<Card
 		bodyClassName="aboutApp_card"
 		headerClassName="aboutApp_card_header"
 		title={
@@ -38,6 +23,7 @@ export const AboutCard = (props) => {
 				<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>
@@ -62,7 +48,26 @@ export const AboutCard = (props) => {
 				<antd.Tag color="#61DBFB"><DiReact /> v{React.version ?? "experimental"}</antd.Tag>
 			</div>
 		</div>
-			</Card>
+	</ACard>
+}
+
+export const ModalCard = (props) => {
+	const [visible, setVisible] = React.useState(false)
+
+	React.useEffect(() => {
+		setVisible(true)
+	}, [])
+
+	const close = () => {
+		setVisible(false)
+		setTimeout(() => {
+			props.onClose()
+		}, 150)
+	}
+
+	return <Mask visible={visible} onMaskClick={() => close()}>
+		<div className="aboutApp_wrapper">
+			<Card />
 		</div>
 	</Mask >
 }
@@ -76,5 +81,5 @@ export function openModal() {
 		document.body.removeChild(component)
 	}
 
-	ReactDOM.render(<AboutCard onClose={onClose} />, component)
+	ReactDOM.render(<ModalCard onClose={onClose} />, component)
 }