import { Link } from 'react-router-dom'; import { useState, useEffect } from 'react'; import CodeHighlight from '../../components/Highlight'; import { useDispatch } from 'react-redux'; import { setPageTitle } from '../../store/themeConfigSlice'; const Countdown = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle('Countdown')); }); const [tabs, setTabs] = useState([]); const toggleCode = (name: string) => { if (tabs.includes(name)) { setTabs((value) => value.filter((d) => d !== name)); } else { setTabs([...tabs, name]); } }; const [demo1, setDemo1] = useState({ days: null, hours: null, minutes: null, seconds: null }); const [timer1, setTimer1] = useState(null); const setTimerDemo1 = () => { const date = new Date(); date.setDate(date.getDate() + 3); const countDownDate = date.getTime(); let updatedValue: any = {}; setTimer1( setInterval(() => { const now = new Date().getTime(); const distance = countDownDate - now; updatedValue.days = Math.floor(distance / (1000 * 60 * 60 * 24)); updatedValue.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); updatedValue.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); updatedValue.seconds = Math.floor((distance % (1000 * 60)) / 1000); setDemo1((demo1: any) => ({ ...demo1, ...updatedValue, })); if (distance < 0) { clearInterval(timer1); } }) ); }; useEffect(() => { setTimerDemo1(); setTimerDemo2(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const [demo2, setDemo2] = useState({ days: null, hours: null, minutes: null, seconds: null }); const [timer2, setTimer2] = useState(null); const setTimerDemo2 = () => { const date = new Date(); date.setFullYear(date.getFullYear() + 1); const countDownDate = date.getTime(); let updatedValue: any = {}; setTimer2( setInterval(() => { const now = new Date().getTime(); const distance = countDownDate - now; updatedValue.days = Math.floor(distance / (1000 * 60 * 60 * 24)); updatedValue.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); updatedValue.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); updatedValue.seconds = Math.floor((distance % (1000 * 60)) / 1000); setDemo2((demo2: any) => ({ ...demo2, ...updatedValue, })); if (distance < 0) { clearInterval(timer2); } }) ); }; return (
  • Components
  • Countdown
{/* Simple Countdown */}
Simple Countdown

{demo1.days}

Days

{demo1.hours}

Hours

{demo1.minutes}

Mins

{demo1.seconds}

Sec

{tabs.includes('code1') && ( 
                                {`import { useState, useEffect } from 'react';

    const [demo1, setDemo1] = useState({ days: null, hours: null, minutes: null, seconds: null });
    const [timer1, setTimer1] = useState(null);

    const setTimerDemo1 = () => {
        const date = new Date();
        date.setDate(date.getDate() + 3);
        const countDownDate = date.getTime();

        let updatedValue: any = {};
        setTimer1(
            setInterval(() => {
                const now = new Date().getTime();

                const distance = countDownDate - now;

                updatedValue.days = Math.floor(distance / (1000 * 60 * 60 * 24));
                updatedValue.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                updatedValue.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                updatedValue.seconds = Math.floor((distance % (1000 * 60)) / 1000);
                setDemo1((demo1: any) => ({
                    ...demo1,
                    ...updatedValue,
                }));

                if (distance < 0) {
                    clearInterval(timer1);
                }
            })
        );
    };

    useEffect(() => {
        setTimerDemo1();
    }, []);



    

        

            
{demo1.days}

        

        
Days

    

    

        

            
{demo1.hours}

        

        
Hours

    

    

        

            
{demo1.minutes}

        

        
Mins

    

    

        

            
{demo1.seconds}

        

        
Sec

    



`}
)}
{/* Circle Countdown */}
Circle Countdown

{demo2.days}

Days

{demo2.hours}

Hours

{demo2.minutes}

Mins

{demo2.seconds}

Sec

{tabs.includes('code2') && ( 
                                {`import { useState, useEffect } from 'react';

    const [demo2, setDemo2] = useState({ days: null, hours: null, minutes: null, seconds: null });
    const [timer2, setTimer2] = useState(null);

    const setTimerDemo2 = () => {
        const date = new Date();
        date.setFullYear(date.getFullYear() + 1);
        const countDownDate = date.getTime();

        let updatedValue: any = {};

        setTimer2(
            setInterval(() => {
                const now = new Date().getTime();
                const distance = countDownDate - now;
                updatedValue.days = Math.floor(distance / (1000 * 60 * 60 * 24));
                updatedValue.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                updatedValue.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                updatedValue.seconds = Math.floor((distance % (1000 * 60)) / 1000);
                setDemo2((demo2: any) => ({
                    ...demo2,
                    ...updatedValue,
                }));

                if (distance < 0) {
                    clearInterval(timer2);
                }
            })
        );
    };

    useEffect(() => {
        setTimerDemo2();
    }, []);



    

        

            
{demo2.days}

        

        
Days

    

    

        

            
{demo2.hours}

        

        
Hours

    

    

        

            
{demo2.minutes}

        

        
Mins

    

    

        

            
{demo2.seconds}

        

        
Sec

    




`}
)}
); }; export default Countdown;