import { Link } from 'react-router-dom'; import { useEffect, useState } from 'react'; import CodeHighlight from '../../components/Highlight'; import { setPageTitle } from '../../store/themeConfigSlice'; import { useDispatch } from 'react-redux'; const Wizards = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle('Wizards')); }); const [codeArr, setCodeArr] = useState([]); const toggleCode = (name: string) => { if (codeArr.includes(name)) { setCodeArr((value) => value.filter((d) => d !== name)); } else { setCodeArr([...codeArr, name]); } }; const [activeTab, setActiveTab] = useState(1); const [activeTab1, setActiveTab1] = useState(1); const [activeTab2, setActiveTab2] = useState(1); const [activeTab3, setActiveTab3] = useState(1); const [activeTab4, setActiveTab4] = useState(1); const [activeTab5, setActiveTab5] = useState(1); const [activeTab6, setActiveTab6] = useState(1); return (
  • Forms
  • Wizards
{/* Basic */}

Pills

Text Only
  • setActiveTab(1)} > 1 Home
  • setActiveTab(2)}> 2 About
  • setActiveTab(3)}> 3 Success

{activeTab === 1 && 'Try the keyboard navigation by clicking arrow left or right!'}

{activeTab === 2 && 'The next and previous buttons help you to navigate through your content.'}

{activeTab === 3 && 'Wonderful transition effects.'}

{codeArr.includes('code1') && ( 
{`import { useState } from 'react';

const [activeTab, setActiveTab] = useState(1);



    
    
        
  • 
            
     setActiveTab(1)}
            >
                1 Home
            
    
        
    • 

        
  • 
            
     setActiveTab(2)}>
                2 About
            
    
        
    • 

        
  • 
            
     setActiveTab(3)}>
                3 Success
            
    
        
    • 
    


    

        
{activeTab === 1 && 'Try the keyboard navigation by clicking arrow left or right!'}

        
{activeTab === 2 && 'The next and previous buttons help you to navigate through your content.'}

        
{activeTab === 3 && 'Wonderful transition effects.'}

    

    

        
        
    


`}
 )}
{/* icon only */}
Icon Only
  • setActiveTab1(1)} >
  • setActiveTab1(2)} >
  • setActiveTab1(3)} >

{activeTab1 === 1 && 'Try the keyboard navigation by clicking arrow left or right!'}

{activeTab1 === 2 && 'The next and previous buttons help you to navigate through your content.'}

{activeTab1 === 3 && 'Wonderful transition effects.'}

{codeArr.includes('code2') && ( 
{`import { useState } from 'react';

const [activeTab1, setActiveTab1] = useState(1);



    
    
        
  • 
            
     setActiveTab1(1)}
            >
                ...
            
    
        
    • 
        
  • 
            
     setActiveTab1(2)}
            >
                ...
            
    
        
    • 
        
  • 
            
     setActiveTab1(3)}
            >
                ...
            
    
        
    • 
    

    

        
{activeTab1 === 1 && 'Try the keyboard navigation by clicking arrow left or right!'}


        
{activeTab1 === 2 && 'The next and previous buttons help you to navigate through your content.'}


        
{activeTab1 === 3 && 'Wonderful transition effects.'}

    

    

        
        
    


`}
 )}
{/* Text & Icon */}
Text & Icon
  • setActiveTab2(1)} >
    Home
  • setActiveTab2(2)} >
    About
  • setActiveTab2(3)} >
    Success

{activeTab2 === 1 && ' Try the keyboard navigation by clicking arrow left or right!'}

{activeTab2 === 2 && 'The next and previous buttons help you to navigate through your content.'}

{activeTab2 === 3 && 'Wonderful transition effects.'}

{codeArr.includes('code3') && ( 
{`import { useState } from 'react';

const [activeTab2, setActiveTab2] = useState(1);



    
    
        
  • 
            
     setActiveTab2(1)}
            >
                ...
            
    
            Home
        
    • 
        
  • 
            
     setActiveTab2(2)}
            >
                ...
            
    
            About
        
    • 
        
  • 
            
     setActiveTab2(3)}
            >
                ...
            
    
            Success
        
    • 
    

    

        
{activeTab2 === 1 && ' Try the keyboard navigation by clicking arrow left or right!'}


        
{activeTab2 === 2 && 'The next and previous buttons help you to navigate through your content.'}


        
{activeTab2 === 3 && 'Wonderful transition effects.'}

    

    

        
        
    


`}
 )}
{/* Circle */}

Circle

{/* icon only */}
Icon Only

{activeTab3 === 1 && ' Try the keyboard navigation by clicking arrow left or right!'}

{activeTab3 === 2 && 'The next and previous buttons help you to navigate through your content.'}

{activeTab3 === 3 && 'Wonderful transition effects.'}

{codeArr.includes('code4') && ( 
{`import { useState } from 'react';

const [activeTab3, setActiveTab3] = useState(1);



    

        

        
    
            
  • 
                
            
    • 
            
  • 
                
            
    • 
            
  • 
                
            
    • 
        

    

    

        
{activeTab3 === 1 && ' Try the keyboard navigation by clicking arrow left or right!'}


        
{activeTab3 === 2 && 'The next and previous buttons help you to navigate through your content.'}


        
{activeTab3 === 3 && 'Wonderful transition effects.'}

    

    

        
        
    


`}
 )}
{/* Text & Icon */}
Text & Icon
  • Home
  • About
  • Success

{activeTab4 === 1 && ' Try the keyboard navigation by clicking arrow left or right!'}

{activeTab4 === 2 && 'The next and previous buttons help you to navigate through your content.'}

{activeTab4 === 3 && 'Wonderful transition effects.'}

{codeArr.includes('code5') && ( 
{`import { useState } from 'react';

const [activeTab4, setActiveTab4] = useState(1);



    

        

        
    
            
  • 
                
                Home
            
    • 
            
  • 
                
                About
            
    • 
            
  • 
                
                Success
            
    • 
        

    

    

        
{activeTab4 === 1 && ' Try the keyboard navigation by clicking arrow left or right!'}


        
{activeTab4 === 2 && 'The next and previous buttons help you to navigate through your content.'}


        
{activeTab4 === 3 && 'Wonderful transition effects.'}

    

    

        
        
    


`}
 )}
{/* Square */}

Square

{/* icon only */}
Icon Only

{activeTab5 === 1 && ' Try the keyboard navigation by clicking arrow left or right!'}

{activeTab5 === 2 && 'The next and previous buttons help you to navigate through your content.'}

{activeTab5 === 3 && 'Wonderful transition effects.'}

{codeArr.includes('code6') && ( 
{`import { useState } from 'react';

const [activeTab5, setActiveTab5] = useState(1);



    

        

        
    
            
  • 
                
            
    • 
            
  • 
                
            
    • 
            
  • 
                
            
    • 
        

    

    

        
{activeTab5 === 1 && ' Try the keyboard navigation by clicking arrow left or right!'}


        
{activeTab5 === 2 && 'The next and previous buttons help you to navigate through your content.'}


        
{activeTab5 === 3 && 'Wonderful transition effects.'}

    

    

        
        
    


`}
 )}
{/* Text & Icon */}
Text & Icon
  • Home
  • About
  • Success

{activeTab6 === 1 && ' Try the keyboard navigation by clicking arrow left or right!'}

{activeTab6 === 2 && 'The next and previous buttons help you to navigate through your content.'}

{activeTab6 === 3 && 'Wonderful transition effects.'}

{codeArr.includes('code7') && ( 
{`import { useState } from 'react';

const [activeTab6, setActiveTab6] = useState(1);



    

        

        
    
            
  • 
                
                Home
            
    • 
            
  • 
                
                About
            
    • 
            
  • 
                
                Success
            
    • 
        

    

    

        
{activeTab6 === 1 && ' Try the keyboard navigation by clicking arrow left or right!'}


        
{activeTab6 === 2 && 'The next and previous buttons help you to navigate through your content.'}


        
{activeTab6 === 3 && 'Wonderful transition effects.'}

    

    

        
        
    


`}
 )}
); }; export default Wizards;