system-copyright-react/src/components/card/CardProjLoading.tsx

import './card-proj-loading.css';
import {Loading3QuartersOutlined} from '@ant-design/icons';
import {IProjLoading} from "../../interfaces/card/ICardProj.ts";
import {useEffect, useState} from "react";

export default function CardProjLoading(props: IProjLoading) {
    const [duration, setDuration] = useState(props.duration);

    useEffect(() => {
        setTimeout(() => {
            const last = duration - 1000;
            if (last <= 0) {
                setDuration(0);
                props.handleCountDownOver();
                return;
            }
            setDuration(last);
        }, 1000);
    }, [duration])

    return (
        <div className="card-proj-loading" onClick={() => {
            if (!props.handleClick) {
                return;
            }
            props.handleClick();
        }}>
            <div className="title">
                <Loading3QuartersOutlined spin={true} style={{color: '#0052d9'}}/>
                <span className="label">{props.title}</span>
            </div>
            <div className="desc">{props.desc}，预计等待{duration / 1000}s</div>
        </div>
    )
}