import { Link } from 'react-router-dom'; import { useEffect, useState } from 'react'; import CodeHighlight from '../../components/Highlight'; import CountUp from 'react-countup'; import { useDispatch } from 'react-redux'; import { setPageTitle } from '../../store/themeConfigSlice'; const Counter = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle('Counter')); }); const [tabs, setTabs] = useState([]); const toggleCode = (name: string) => { if (tabs.includes(name)) { setTabs((value) => value.filter((d) => d !== name)); } else { setTabs([...tabs, name]); } }; return (
Documentation: https://www.npmjs.com/package/react-countup
{/* Simple Counter */}
Simple Counter

HOURS

TICKETS

CUSTOMERS

{tabs.includes('code1') && ( 
                                        {`import CountUp from 'react-countup';



    

        

            
        

        
HOURS

    

    

        

            
        

        
TICKETS

    

    

        

            
        

        
CUSTOMERS

    



`}
)}
{/* With icon */}
With Icon

Clients

Downloads

Awards

{tabs.includes('code2') && ( 
                                        {`import CountUp from 'react-countup';



    

        

            
        

        

            ...
            Clients
        

    

    

        

            
        

        

        ...
            Downloads
        

    

    

        

            
        

        

        ...
            Awards
        

    




`}
)}
); }; export default Counter;