import { Link } from 'react-router-dom'; import CodeHighlight from '../../components/Highlight'; import { useState, Fragment, useEffect } from 'react'; import { Dialog, Transition } from '@headlessui/react'; import { useDispatch, useSelector } from 'react-redux'; import { IRootState } from '../../store'; import { Tab } from '@headlessui/react'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import { Navigation, Pagination } from 'swiper/modules'; import { setPageTitle } from '../../store/themeConfigSlice'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; const Modals = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle('Modals')); }); const items = ['carousel1.jpeg', 'carousel2.jpeg', 'carousel3.jpeg']; const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl' ? true : false; const [codeArr, setCodeArr] = useState([]); const toggleCode = (name: string) => { if (codeArr.includes(name)) { setCodeArr((value) => value.filter((d) => d !== name)); } else { setCodeArr([...codeArr, name]); } }; const [modal1, setModal1] = useState(false); const [modal2, setModal2] = useState(false); const [modal3, setModal3] = useState(false); const [modal4, setModal4] = useState(false); const [modal5, setModal5] = useState(false); const [modal6, setModal6] = useState(false); const [modal7, setModal7] = useState(false); const [modal8, setModal8] = useState(false); const [modal9, setModal9] = useState(false); const [modal10, setModal10] = useState(false); const [modal11, setModal11] = useState(false); const [modal12, setModal12] = useState(false); const [modal13, setModal13] = useState(false); const [modal14, setModal14] = useState(false); const [modal15, setModal15] = useState(false); const [modal16, setModal16] = useState(false); const [modal17, setModal17] = useState(false); const [modal18, setModal18] = useState(false); const [modal19, setModal19] = useState(false); const [modal20, setModal20] = useState(false); const [modal21, setModal21] = useState(false); const [modal22, setModal22] = useState(false); const themeConfig = useSelector((state: IRootState) => state.themeConfig); return (
Documentation: https://headlessui.com/react/dialog
{/* Basic */}
Basic
setModal1(false)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{codeArr.includes('code1') && ( 
                                    {`import { Dialog, Transition,Tab } from '@headlessui/react';
import { useState, Fragment } from 'react';

const [modal1, setModal1] = useState(false);



    

        
    

    
         setModal1(false)}>
            
                

            
            

                

                    
                        
                            

                                
Modal Title

                                
                            

                            

                                

                                    Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque
                                    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit
                                    amet ullamcorper mi.
                                

                                

                                    
                                    
                                

                            

                        
                    
                

            

        

    



                                        `}
)}
{/* Vertically Centered */}
Vertically Centered
setModal2(false)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{codeArr.includes('code2') && ( 
                                    {`import { Dialog, Transition } from '@headlessui/react';
import { useState, Fragment } from 'react';

const [modal2, setModal2] = useState(false);



    

        
    

    
         setModal2(false)}>
            
                

            
            

                

                    
                        
                            

                                
Modal Title

                                
                            

                            

                                

                                    Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque
                                    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit
                                    amet ullamcorper mi.
                                

                                

                                    
                                    
                                

                            

                        
                    
                

            

        

    


`}
)}
{/* static */}
Static
setModal3(true)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{codeArr.includes('code3') && ( 
                                    {`import { Dialog, Transition } from '@headlessui/react';
import { useState, Fragment } from 'react';

const [modal3, setModal3] = useState(false);



    

        
    

    
         setModal3(true)}>
            
                

            
            

                

                    
                        
                            

                                
Modal Title

                                
                            

                            

                                

                                    Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque
                                    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit
                                    amet ullamcorper mi.
                                

                                

                                    
                                    
                                

                            

                        
                    
                

            

        

    



`}
)}
{/* Remove animation */}
Remove animation
setModal4(true)}>
setModal4(false)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{codeArr.includes('code4') && ( 
                                    {`import { Dialog, Transition } from '@headlessui/react';
import { useState, Fragment } from 'react';

const [modal4, setModal4] = useState(false);


 setModal4(true)}>
    

        
    

    
         setModal4(false)}>
            
                

            
            

                

                    
                        

                            
Modal Title

                            
                        

                        

                            

                                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus
                                et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper
                                mi.
                            

                            

                                
                                
                            

                        

                    
                

            

        

    


`}
)}
{/* Optional sizes */}
Optional sizes
{/* Extra large */}
setModal5(false)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{/* Large */}
setModal6(false)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{/* Small */}
setModal7(false)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{codeArr.includes('code5') && ( 
                                    {`import { Dialog, Transition } from '@headlessui/react';
import { useState, Fragment } from 'react';


const [modal5, setModal5] = useState(false);
const [modal6, setModal6] = useState(false);
const [modal7, setModal7] = useState(false);



    

        

            
            
                 setModal5(false)}>
                    
                        

                    
                    

                        

                            
                                
                                    

                                        
Modal Title

                                        
                                    

                                    

                                        

                                            Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius
                                            natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac
                                            pulvinar. Ut sit amet ullamcorper mi.
                                        

                                        

                                            
                                            
                                        

                                    

                                
                            
                        

                    

                

            
        


        

            
            
                 setModal6(false)}>
                    
                        

                    
                    

                        

                            
                                
                                    

                                        
Modal Title

                                        
                                    

                                    

                                        

                                            

                                                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius
                                                natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac
                                                pulvinar. Ut sit amet ullamcorper mi.
                                            

                                        

                                        

                                            
                                            
                                        

                                    

                                
                            
                        

                    

                

            
        


        

            
            
                 setModal7(false)}>
                    
                        

                    
                    

                        

                            
                                
                                    

                                        
Modal Title

                                        
                                    

                                    

                                        

                                            

                                                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius
                                                natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac
                                                pulvinar. Ut sit amet ullamcorper mi.
                                            

                                        

                                        

                                            
                                            
                                        

                                    

                                
                            
                        

                    

                

            
        

    




`}
)}
{/* Video */}
Video
setModal8(false)}>
{codeArr.includes('code6') && ( 
                                    {`import { Dialog, Transition } from '@headlessui/react';
import { useState, Fragment } from 'react';

const [modal8, setModal8] = useState(false);





    



     setModal8(false)}>
        
            

        
        

            

                
                    
                        

                            
                        

                        
                    
                
            

        

    




`}
)}
{/* Animation Style Modal */}
Animation Style Modal
{/* FadeIn */}
setModal9(false)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{/* SlideIn Down */}
setModal10(false)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{/* FadeIn Up */}
setModal11(false)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{/* SlideIn Up */}
setModal12(false)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{/* FadeIn Left */}
setModal13(false)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{/* RotateIn Left */}
setModal14(false)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{/* FadeIn Right */}
setModal15(false)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{/* ZoomIn Up*/}
setModal16(false)}>
Modal Title

Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.

{codeArr.includes('code7') && ( 
                                    {`import { Dialog, Transition } from '@headlessui/react';
import { useState, Fragment } from 'react';

const [modal9, setModal9] = useState(false);
const [modal10, setModal10] = useState(false);
const [modal11, setModal11] = useState(false);
const [modal12, setModal12] = useState(false);
const [modal13, setModal13] = useState(false);
const [modal14, setModal14] = useState(false);
const [modal15, setModal15] = useState(false);
const [modal16, setModal16] = useState(false);



    

        

            
            
                 setModal9(false)}>
                    
                        

                    
                    

                        

                            
                                

                                    
Modal Title

                                    
                                

                                

                                    

                                        Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque
                                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut
                                        sit amet ullamcorper mi.
                                    

                                    

                                        
                                        
                                    

                                

                            
                        

                    

                

            
        

        

            
            
                 setModal10(false)}>
                    
                        

                    
                    

                        

                            
                                

                                    
Modal Title

                                    
                                

                                

                                    

                                        Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque
                                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut
                                        sit amet ullamcorper mi.
                                    

                                    

                                        
                                        
                                    

                                

                            
                        

                    

                

            
        

        

            
            
                 setModal11(false)}>
                    
                        

                    
                    

                        

                            
                                

                                    
Modal Title

                                    
                                

                                

                                    

                                        Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque
                                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut
                                        sit amet ullamcorper mi.
                                    

                                    

                                        
                                        
                                    

                                

                            
                        

                    

                

            
        

        

            
            
                 setModal12(false)}>
                    
                        

                    
                    

                        

                            
                                

                                    
Modal Title

                                    
                                

                                

                                    

                                        Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque
                                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut
                                        sit amet ullamcorper mi.
                                    

                                    

                                        
                                        
                                    

                                

                            
                        

                    

                

            
        

        

            
            
                 setModal13(false)}>
                    
                        

                    
                    

                        

                            
                                

                                    
Modal Title

                                    
                                

                                

                                    

                                        Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque
                                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut
                                        sit amet ullamcorper mi.
                                    

                                    

                                        
                                        
                                    

                                

                            
                        

                    

                

            
        

        

            
            
                 setModal14(false)}>
                    
                        

                    
                    

                        

                            
                                

                                    
Modal Title

                                    
                                

                                

                                    

                                        Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque
                                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut
                                        sit amet ullamcorper mi.
                                    

                                    

                                        
                                        
                                    

                                

                            
                        

                    

                

            
        

        

            
            
                 setModal15(false)}>
                    
                        

                    
                    

                        

                            
                                

                                    
Modal Title

                                    
                                

                                

                                    

                                        Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque
                                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut
                                        sit amet ullamcorper mi.
                                    

                                    

                                        
                                        
                                    

                                

                            
                        

                    

                

            
        

        

            
            
                 setModal16(false)}>
                    
                        

                    
                    

                        

                            
                                

                                    
Modal Title

                                    
                                

                                

                                    

                                        Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque
                                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut
                                        sit amet ullamcorper mi.
                                    

                                    

                                        
                                        
                                    

                                

                            
                        

                    

                

            
        

    




`}
)}
{/* Custom */}
Custom

More Custom Modals.

{/* standard */}
setModal17(false)}>

Vivamus vitae hendrerit neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi consequat auctor turpis, vitae dictum augue efficitur vitae. Vestibulum a risus ipsum. Quisque nec lacus dolor. Quisque ornare tempor orci id rutrum.

{/* tabs */}
setModal18(false)}>
Tabs
{({ selected }) => ( )} {({ selected }) => ( )} {({ selected }) => ( )} Disabled

We move your world!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

img
Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Disabled
{/* profile */}
setModal19(false)}>
img

Click on view to access
your profile.

{/* login */}
setModal20(false)}>
Login
OR

Looking to

{/* Register */}
{ setModal21(false); }} >
Register
OR

Already have

{/* slider */}
{ setModal22(false); }} >
Slider
{items.map((item, i) => { return ( img ); })}
{codeArr.includes('code8') && ( 
                                    {`import { Dialog, Transition,Tab } from '@headlessui/react';
import { useState, Fragment } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { Navigation, Pagination } from 'swiper/modules';

    const [modal17, setModal17] = useState(false);
    const [modal18, setModal18] = useState(false);
    const [modal19, setModal19] = useState(false);
    const [modal20, setModal20] = useState(false);
    const [modal21, setModal21] = useState(false);
    const [modal22, setModal22] = useState(false);



    
More Custom Modals.

    

        {/* standard */}
        

            
            
                 setModal17(false)}>
                    
                        

                    
                    

                        

                            
                                
                                    

                                        
                                            ...
                                        
                                    

                                    

                                        

                                            

                                                Vivamus vitae hendrerit neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi
                                                consequat auctor turpis, vitae dictum augue efficitur vitae. Vestibulum a risus ipsum. Quisque nec lacus dolor. Quisque ornare
                                                tempor orci id rutrum.
                                            

                                        

                                        

                                            
                                            
                                        

                                    

                                
                            
                        

                    

                

            
        

        {/* tabs */}
        

            
            
                 setModal18(false)}>
                    
                        

                    
                    

                        

                            
                                
                                    

                                        
Tabs

                                        
                                    

                                    

                                        
                                            
                                                
                                                    {({ selected }) => (
                                                        
                                                    )}
                                                
                                                
                                                    {({ selected }) => (
                                                        
                                                    )}
                                                
                                                
                                                    {({ selected }) => (
                                                        
                                                    )}
                                                
                                                Disabled
                                            
                                            
                                                
                                                    

                                                        
We move your world!

                                                        

                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                                                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                        

                                                        

                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                                                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                        

                                                    

                                                
                                                
                                                    

                                                        

                                                            

                                                                img
                                                            

                                                            

                                                                
Media heading

                                                                

                                                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
                                                                    vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec
                                                                    lacinia congue felis in faucibus.
                                                                

                                                            

                                                        

                                                    

                                                
                                                
                                                    

                                                        

                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                                                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                                                            sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                        

                                                    

                                                
                                                Disabled
                                            
                                        
                                        

                                            
                                            
                                        

                                    

                                
                            
                        

                    

                

            
        

        {/* profile */}
        

            
            
                 setModal19(false)}>
                    
                        

                    
                    

                        

                            
                                
                                    

                                        
                                    

                                    

                                        

                                            

                                                img
                                            

                                            

                                                Click on view to access 

                                                your profile.
                                            

                                        

                                        

                                            
                                        

                                    

                                
                            
                        

                    

                
            
        

        {/* login */}
        

            
            
                 setModal20(false)}>
                    
                        

                    
                    

                        

                            
                                
                                    

                                        
Login

                                        
                                    


                                    

                                        

                                            

                                                
                                                    ...
                                                
                                                
                                            

                                            

                                                
                                                    ...
                                                
                                                
                                            

                                            
                                        

                                    

                                    
OR

                                    

                                        
                                        
                                    

                                    

                                        

                                            Looking to
                                            
                                        

                                    

                                
                            
                        

                    

                

            
        

        {/* Register */}
        

            
            
                 {
                        setModal21(false);
                    }}
                >
                    
                        

                    
                    

                        

                            
                                
                                    

                                        
Register

                                        
                                    

                                    

                                        

                                            

                                                
                                                    ...
                                                
                                                
                                            

                                            

                                                
                                                    ...
                                                
                                                
                                            

                                            

                                                
                                                    ...
                                                
                                                
                                            

                                            
                                        

                                    

                                    
OR

                                    

                                        
                                        
                                    

                                    

                                        

                                            Already have
                                            
                                        

                                    

                                
                            
                        

                    

                

            
        

        {/* slider */}
        

            
             {
                    setModal22(false);
                }}
            >
                

                    

                        
                            

                                Slider
                                
                            

                            
                                

                                    {items.map((item, i) => {
                                        return (
                                            
                                                img
                                            
                                        );
                                    })}
                                

                                
                                
                                

                            
                        
                    

                

            
        

    


`}
)}
); }; export default Modals;