site_8g/src/components/Card/Card.tsx

"use client";
import { GameListRep, getGameDetailApi } from "@/api/home";
import { useRouter } from "@/i18n";
import { useGlobalStore } from "@/stores";
import { Button, Modal, ModalBody, ModalContent, useDisclosure } from "@nextui-org/react";
import { useTranslations } from "next-intl";
import { FC, PropsWithChildren, ReactNode, useRef } from "react";
import styles from "./style.module.scss";
export interface CardProps {
    item?: GameListRep;
    render?: (value: GameListRep) => ReactNode;
}
const Card: FC<PropsWithChildren<CardProps>> = (props) => {
    const { render, item } = props;
    const { isOpen, onOpen, onOpenChange } = useDisclosure();
    const app: HTMLElement = document.querySelector("#app")!;
    const t = useTranslations("Game");
    const urlRef = useRef<string>("");

    const state = useGlobalStore();
    const router = useRouter();

    const handler = (game: GameListRep) => {
        onOpen();
        const params = {
            id: game.id,
        };
        getGameDetailApi(params).then((res) => {
            urlRef.current = res.data.game_url;
        });
    };
    const playGameHandler = () => {
        const { token } = state;
        if (token) {
            window.open(urlRef.current);
        } else {
            router.push("/login");
        }
    };
    return (
        <>
            {render ? (
                render(item!)
            ) : (
                <div className={styles.cardWrap} onClick={() => handler(item!)}>
                    <img src={item?.game_icon} alt={item?.game_name_cn} className={"h-1/1"} />
                </div>
            )}
            <Modal
                isOpen={isOpen}
                portalContainer={app}
                placement={"bottom"}
                onOpenChange={onOpenChange}
                classNames={{
                    header: "px-0 pb-0 ",
                    wrapper: "w-[100vw]  m-auto",
                    closeButton: "text-[20px] top-[0rem] right-0 text-[#fff] ",
                    backdrop: "absolute top-0 left-0 sm:my-0 ",
                    base: "my-0 my-0 sm:mx-[0] mx-0 sm:my-0 max-w-[4.02rem]  ",
                    body: "py-[12px]",
                }}
            >
                <ModalContent>
                    {(onClose) => (
                        <>
                            <ModalBody className={"w-[4rem] text-[0.1111rem]"}>
                                <div className={"w-1/1 flex flex-1"}>
                                    <div className={styles.cardWrap}>
                                        <img src={item?.game_icon} alt={item?.game_name_cn} />
                                    </div>
                                    <div className={styles.cardWrapGmeInfo}>
                                        <p className={"h-[0.6rem]"}>{item?.game_name_cn}</p>

                                        <div className={"flex w-[2.2rem] justify-around"}>
                                            <Button
                                                onClick={playGameHandler}
                                                className={
                                                    "h-[0.39rem] w-[0.89rem] rounded-[0.05rem] text-[0.15rem]" +
                                                    " bg-[#3a3a3a]" +
                                                    " font-bold"
                                                }
                                            >
                                                {t("demo")}
                                            </Button>
                                            <Button
                                                onClick={playGameHandler}
                                                className={`h-[0.39rem] w-[0.89rem] rounded-[0.05rem] bg-[#009d80] text-[0.15rem] font-bold`}
                                            >
                                                {t("join")}
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                            </ModalBody>
                        </>
                    )}
                </ModalContent>
            </Modal>
        </>
    );
};

export default Card;