popup-forms-react/src/App.jsx

import React, { useState } from 'react'

import ButtonPrimary from './components/controls/ButtonPrimary'
import Popup from './components/Popup';

import { FormLogin } from './components/forms/FormLogin'
import { FormRegistration } from './components/forms/FormRegistration';
import { FormFeedback } from './components/forms/FormFeedback';

const App = () => {
  const [popupTitle, setPopupTitle] = useState('')
  const [popupContent, setPopupContent] = useState(<></>)
  const [popupOpened, setPopupOpened] = useState(false)

  const close = () => {
    setPopupOpened(false)
  }

  const doOpenLoginPopup = () => {
    setPopupContent(<FormLogin setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} close={close} />)
    setPopupOpened(true)
  }

  const doOpenRegistrationPopup = () => {
    setPopupContent(<FormRegistration setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} close={close} />)
    setPopupOpened(true)
  }

  const doOpenFeedbackPopup = () => {
    setPopupContent(<FormFeedback setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} close={close} />)
    setPopupOpened(true)
  }

  return (
    <>
      <div className="w-full h-full min-h-screen bg-white text-gray-900 text-lg flex items-center font-gilroy">
        <div className="page-content max-w-lg w-full mx-auto py-8">
          <div className="my-4">
            <ButtonPrimary text="Sign In" action={doOpenLoginPopup} />
          </div>
          <div className="my-4">
            <ButtonPrimary text="Registration" action={doOpenRegistrationPopup} />
          </div>
          <div className="my-4">
            <ButtonPrimary text="Feedback" action={doOpenFeedbackPopup} />
          </div>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
          <p>Delectus sequi, iste error dignissimos necessitatibus aliquam perspiciatis pariatur reprehenderit dolor maiores sed officiis modi, praesentium atque? Delectus amet optio tempora ipsam, molestiae unde quibusdam minus placeat dolorem exercitationem enim alias?</p>
          <p>Porro tempore natus minus ex voluptas, hic culpa iure vero quod laudantium quas enim pariatur ullam commodi! Totam deleniti nesciunt earum, nam modi aspernatur rem harum pariatur, voluptatibus, adipisci accusamus sequi perferendis corrupti explicabo excepturi commodi soluta necessitatibus! Officiis similique nemo architecto odit debitis cupiditate reprehenderit ex vel atque beatae blanditiis dolores sequi unde quisquam molestias, eum sit aut. Soluta hic provident autem eius a aliquid neque in, distinctio eveniet ullam sequi pariatur deleniti perferendis magni debitis minus quod!</p>
          <p>Facere ex error molestiae maxime ullam dolor blanditiis dolores fuga ipsam vero distinctio, ipsum delectus harum optio quo repudiandae unde beatae rerum laborum cumque, quisquam quia quod?</p>
          <p>Numquam praesentium ex recusandae quia tenetur, quod, illum officiis magni est alias consequatur maiores accusamus ipsam provident sequi dolores excepturi exercitationem vitae aspernatur perferendis porro sit accusantium aut? Tempora nesciunt, autem dignissimos sit ratione dolores odit amet laborum nihil corporis id nobis tempore! Quam rerum repudiandae expedita voluptate error dolorum a. Obcaecati fugiat magnam earum?</p>
        </div>
      </div>
      <Popup opened={popupOpened} title={popupTitle} close={close}>{popupContent}</Popup>
    </>
  )
}

export default App;