feat: add sponsor dialog

Author: S-N-O-R-L-A-X

src/assets/alipay.jpg

@@ -0,0 +1,9 @@
+.dialogContent {
+
+}
+
+.picture {
+	margin: 1rem;
+	max-width: 18rem;
+	max-width: 12rem;
+}

src/assets/wechatpay.png

@@ -1,6 +1,9 @@
-import { Bar, Button, Dialog, DialogPropTypes } from "@ui5/webcomponents-react";
+import { Bar, Button, Dialog, DialogPropTypes, FlexBox } from "@ui5/webcomponents-react";
 import { MouseEventHandler } from "react";
 import { createPortal } from "react-dom";
+import styles from "./SponsorDialog.module.css";
+import alipay from "../../assets/alipay.jpg";
+import wechatpay from "../../assets/wechatpay.png"
 
 interface SponsorDialogProps extends DialogPropTypes {
 	closeHandler: MouseEventHandler<HTMLButtonElement>;
@@ -10,7 +13,12 @@ export default function SponsorDialog(props: SponsorDialogProps) {
 	const { open, closeHandler, ...rest } = props;
 	return (
 		createPortal(
-			<Dialog open={open} {...rest} footer={<Bar design="Footer" endContent={<button onClick={closeHandler}>Close</button>} />}></Dialog>,
+			<Dialog headerText="付款方式" open={open} {...rest} footer={<Bar design="Footer" endContent={<button onClick={closeHandler}>Close</button>} />}>
+				<FlexBox justifyContent="SpaceBetween" className={styles.dialogContent}>
+					<img className={styles.picture} src={alipay}></img>
+					<img className={styles.picture} src={wechatpay}></img>
+				</FlexBox>
+			</Dialog>,
 			document.body
 		)
 	)