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 {useState} from "react";

export default function CardProjLoading(props: IProjLoading) {

    const [duration, setDuration] = useState(props.duration);

    const interval = setInterval(() => {
        const last = duration - 1000;
        if (last <= 0) {
            setDuration(0);
            clearInterval(interval);
            props.handleCountDownOver();
            return;
        }
        setDuration(last);
    }, 1000);

    return (
        <div className="card-proj-loading">
            <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>
    )
}