site_8g/src/components/HomeWheel/index.tsx

"use client";
// import { useRouter } from "@/i18n/routing";
import { Link } from "@/i18n/routing";
import { getToken } from "@/utils/Cookies";
import React from "react";
import Wheel from "../Wheel";

const HomeWheel = (props: any) => {
    const doStart = () => {
        if (!getToken()) {
            return;
        }
    };
    const doEnd = () => {
        if (typeof props?.doClose === "function") {
            setTimeout(() => {
                props.doClose("confirm");
            }, 1000);
        }
    };
    const centerWrap = React.useCallback(() => {
        return ({ children }: any) => {
            if (getToken()) {
                return <>{children}</>;
            }
            return (
                <Link href="/login" onClick={(evt: any) => evt.stopPropagation()}>
                    {children}
                </Link>
            );
        };
    }, []);

    const CenterWrap = centerWrap();

    return (
        <div className="relative py-[.4rem]">
            <div className="relative z-[10]">
                <Wheel
                    className="px-[30px]"
                    onStart={doStart}
                    onEnd={doEnd}
                    center={
                        <CenterWrap>
                            <div
                                className="flex items-center justify-center"
                                style={{
                                    background: "url('/wheel/RotaryCenter.webp')",
                                    width: "1.1rem",
                                    height: "1.1rem",
                                    backgroundSize: "100% 100%",
                                }}
                            >
                                <img
                                    src="/wheel/word.webp"
                                    className="w-[80%]"
                                    alt=""
                                    style={{
                                        animation:
                                            "pulse 2s linear 0s infinite normal none running",
                                    }}
                                />
                            </div>
                        </CenterWrap>
                    }
                    renderBg={
                        <div
                            className="absolute left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2 transform"
                            style={{ width: "calc(100% - 60px + 38px)", top: `calc(50% - 5px)` }}
                        >
                            <img src="/wheel/waipan_bg.webp" alt="" />
                        </div>
                    }
                    arrow={() => (
                        <div className="relative pt-[.2rem]">
                            <img
                                src="/wheel/Turntableoutsidethebox.webp"
                                className="!w-[.64rem]"
                                alt=""
                            />
                            <img
                                src="/wheel/zhizhen_bg.webp"
                                className="absolute left-[50%] top-[.25rem] !h-[auto] !w-[.3rem] -translate-x-[50%] transform"
                                alt=""
                            />
                        </div>
                    )}
                ></Wheel>
            </div>
            <div className="absolute -bottom-[60px]">
                <div className="relative flex justify-center">
                    <img src="/wheel/spinbt.webp" className="relative z-[9] w-[90%]" alt="" />
                    <img
                        src="/wheel/peishi6_bg.webp"
                        className="absolute -bottom-[.1rem] -right-[.1rem] z-[11] w-[.7rem]"
                        alt=""
                    />
                    <img
                        src="/wheel/peishi4_bg.webp"
                        alt=""
                        className="absolute -right-[.1rem] bottom-[.47rem] z-[7] w-[.9rem]"
                    />
                    <img
                        src="/wheel/peishi1_bg.webp"
                        className="absolute -left-[.1rem] bottom-[.15rem] z-[7] w-[.9rem]"
                        alt=""
                    />
                </div>
            </div>
            <div className="absolute -top-[.32rem] flex w-[100%] justify-center">
                <div className="relativeflex justify-center">
                    <img src="/wheel/peishi3_bg.webp" className="relative z-[8] w-[2rem]" alt="" />
                    <img
                        src="/wheel/spinLeft.webp"
                        className="absolute -right-[.1rem] -top-[.1rem] z-[7] w-[1.4rem] origin-center"
                        style={{ transform: "rotateY(180deg)" }}
                        alt=""
                    />
                    <img
                        src="/wheel/spinLeft.webp"
                        className="absolute -left-[.1rem] -top-[.1rem] z-[7] w-[1.4rem] origin-center"
                        alt=""
                    />
                    <img
                        src="/wheel/peishi5_bg.webp"
                        className="absolute -top-[.3rem] left-[.1rem] w-[.75rem]"
                        alt=""
                    />
                </div>
            </div>
        </div>
    );
};

export default HomeWheel;