site_8g/src/components/Card/Card.tsx

"use client";
import { EntityGameListRep } from "@/api/home";
import { Button, Modal, ModalBody, ModalContent, useDisclosure } from "@nextui-org/react";
import { useTranslations } from "next-intl";
import { FC, PropsWithChildren, ReactNode } from "react";
import styles from "./style.module.scss";
export interface CardProps {
    item?: EntityGameListRep;
    render?: (value: EntityGameListRep) => 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 handler = (game: EntityGameListRep) => {
        onOpen();
    };
    return (
        <>
            <div className={styles.cardWrap} onClick={() => handler(item!)}>
                {render ? (
                    render(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
                                                className={
                                                    "h-[0.39rem] w-[0.89rem] rounded-[0.05rem] text-[0.15rem]" +
                                                    " bg-[#3a3a3a]" +
                                                    " font-bold"
                                                }
                                            >
                                                {t("demo")}
                                            </Button>
                                            <Button
                                                className={
                                                    "h-[0.39rem] w-[0.89rem] text-[0.15rem]" +
                                                    " rounded-[0.05rem]" +
                                                    " bg-[#009d80]" +
                                                    " font-bold"
                                                }
                                            >
                                                {t("join")}
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                            </ModalBody>
                        </>
                    )}
                </ModalContent>
            </Modal>
        </>
    );
};

export default Card;