system-copyright-react/src/components/recharge/RechargeHead.tsx

import './recharge-head.css';
import Payment from "../payment/Payment.tsx";
import {Modal} from "antd";
import {useState} from "react";

export default function RechargeHead() {

    const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);

    return (
        <>
            <div className="head-item recharge-head">
                <span onClick={() => {
                    setIsPaymentModalOpen(true);
                }}>充值</span>
            </div>
            <Modal open={isPaymentModalOpen}
                   title="充值"
                   onCancel={() => {
                       setIsPaymentModalOpen(false);
                   }}
                   footer={false}
            >
                <Payment
                    handleConfirm={() => {
                        setIsPaymentModalOpen(false);
                    }}
                    handleCancel={() => {
                        setIsPaymentModalOpen(false);
                    }}
                />
            </Modal>
        </>

    )
}