popup-forms-react/src/App.jsx

import React, { useState } from 'react'

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

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


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

  const close = () => {
    if (popupBack) {
      setPopupOpened(false)
      setTimeout(() => {
          setPopupContent(popupBack)
          setPopupOpened(true)
      }, 200)
    } else {
      setPopupOpened(false)
    }
  }

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

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

  return (
    <>
      <div className="w-full h-full min-h-screen bg-white text-gray-900 text-lg flex items-center">
        <div className="max-w-lg w-full mx-auto py-8">
          <div className="my-4">
            <ButtonPrimary text="Login" action={doOpenLoginPopup} />
          </div>
          <div className="my-4">
            <ButtonPrimary text="Registration" action={doOpenRegistrationPopup} />
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis voluptates necessitatibus impedit laudantium, ea quam voluptatibus unde nulla voluptas neque suscipit temporibus ipsam ducimus eum inventore libero, ullam soluta minima adipisci omnis! Deleniti alias perspiciatis et? Accusamus aliquam eveniet voluptas vitae tenetur quas quae maxime necessitatibus mollitia molestias, commodi sunt quibusdam, cum, vero qui exercitationem iste beatae eaque dicta odit deleniti dolorem! Eius itaque quasi quibusdam tempora fugit laboriosam magni quod vel voluptas, officiis culpa numquam, molestias tempore. Sapiente exercitationem doloremque velit dolores excepturi asperiores, cumque minus earum enim voluptatibus quod veritatis non tempora nemo quo officiis expedita eveniet ratione atque! Illo ab accusamus vero, quas quisquam soluta. Voluptatum repudiandae asperiores laboriosam blanditiis dolorum quo, minus porro consequuntur eius nihil illum quaerat quod, laudantium omnis temporibus inventore voluptate, explicabo libero numquam beatae saepe? Repudiandae perferendis nostrum sit nam ad eaque expedita doloribus? Deserunt perspiciatis quo nulla dolor voluptatum temporibus, beatae iusto veritatis laboriosam reiciendis cupiditate ab quisquam. Distinctio neque, voluptate enim, aliquam dignissimos inventore perspiciatis tempore, quae officia quis minima necessitatibus at repellendus. Animi corrupti at modi quas et ipsam asperiores a ducimus consequuntur necessitatibus! Tempore, quisquam? Magnam harum ducimus cupiditate aspernatur, sit veritatis ipsa ratione maxime similique fuga corporis consequuntur obcaecati quas provident ut! Dignissimos labore qui amet in, accusantium minus suscipit numquam saepe nulla hic vero molestias mollitia autem, magni rem illo fugit doloremque est consectetur? Iure laborum nesciunt possimus quod animi temporibus perspiciatis modi aspernatur alias, maxime, sint dolores. Ab quaerat beatae dolorem itaque ex, similique dolore consectetur voluptatibus tenetur maiores eaque tempore quos ullam facilis illo nisi ipsum veniam maxime pariatur sint iste? Modi voluptas molestias inventore omnis repellendus? Veniam alias rerum voluptatum aut possimus labore, iste neque recusandae eveniet aspernatur dolor mollitia accusantium repudiandae molestias magni odit illum dolorem iure nesciunt cumque commodi voluptatibus sed nobis! Labore sint optio voluptatum, harum minima ad cum dolorem inventore sed qui eligendi asperiores nihil, quisquam veniam unde quaerat eveniet ipsam reprehenderit. Molestias sequi sapiente, aperiam iusto nostrum obcaecati accusamus tenetur eum excepturi cupiditate voluptatem dolor consequuntur, modi nesciunt quibusdam nam quae, illo sed animi debitis praesentium deserunt! Obcaecati, repellendus odit. Commodi, omnis cupiditate qui atque debitis repellendus eius ipsam deserunt cum pariatur, ut illum nisi aspernatur exercitationem odit consectetur aliquam nam dignissimos minus non. Nam possimus totam doloremque ipsam architecto enim corrupti officia iste debitis ab nemo, exercitationem facere laborum optio magni earum, temporibus, impedit ipsa perferendis! Ex!</p>
        </div>
      </div>
      <Popup opened={popupOpened} title={popupTitle} close={close}>{popupContent}</Popup>
    </>
  )
}

export default App;