import { useState } from 'react'
import {
  Button,
  Modal,
  ModalBody,
  ModalFooter,
  ModalHeader,
} from 'flowbite-react'

const DefaultModalCode = () => {
  const [openModal, setOpenModal] = useState(false)

  return (
    <div>
      <div>
        <Button
          onClick={() => setOpenModal(true)}
          className='px-10'
          color='primary'>
          Default Modal
        </Button>
        <Modal show={openModal} onClose={() => setOpenModal(false)}>
          <ModalHeader className='rounded-t-md pb-0'>
            Terms of Service
          </ModalHeader>
          <ModalBody>
            <div className='space-y-6'>
              <p className='text-base leading-relaxed text-gray-500 dark:text-gray-400'>
                With less than a month to go before the European Union enacts
                new consumer privacy laws for its citizens, companies around the
                world are updating their terms of service agreements to comply.
              </p>
              <p className='text-base leading-relaxed text-gray-500 dark:text-gray-400'>
                The European Union’s General Data Protection Regulation
                (G.D.P.R.) goes into effect on May 25 and is meant to ensure a
                common set of data rights in the European Union. It requires
                organizations to notify users as soon as possible of high-risk
                data breaches that could personally affect them.
              </p>
            </div>
          </ModalBody>
          <ModalFooter>
            <Button onClick={() => setOpenModal(false)} className=' bg-primary'>
              I accept
            </Button>
            <Button color='gray' onClick={() => setOpenModal(false)}>
              Decline
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    </div>
  )
}

export default DefaultModalCode

import { useState } from 'react'
import { Button, Modal, ModalBody, ModalHeader } from 'flowbite-react'
import { HiOutlineExclamationCircle } from 'react-icons/hi'

const PopupModalCode = () => {
  const [popupModal, setPopupModal] = useState(false)

  return (
    <div>
      <div>
        <Button
          onClick={() => setPopupModal(true)}
          className='px-10'
          color='secondary'>
          Pop-up Modal
        </Button>
        <Modal
          show={popupModal}
          size='md'
          onClose={() => setPopupModal(false)}
          popup
          className='rounded-t-md'>
          <ModalHeader />
          <ModalBody>
            <div className='text-center'>
              <HiOutlineExclamationCircle className='mx-auto mb-4 h-14 w-14 text-gray-400 dark:text-gray-200' />
              <h3 className='mb-5 text-lg font-normal text-gray-500 dark:text-gray-400'>
                Are you sure you want to delete this product?
              </h3>
              <div className='flex justify-center gap-4'>
                <Button color='error' onClick={() => setPopupModal(false)}>
                  {"Yes, I'm sure"}
                </Button>
                <Button color='gray' onClick={() => setPopupModal(false)}>
                  No, cancel
                </Button>
              </div>
            </div>
          </ModalBody>
        </Modal>
      </div>
    </div>
  )
}

export default PopupModalCode

import { useState } from 'react'
import {
  Button,
  Checkbox,
  Label,
  Modal,
  ModalBody,
  ModalHeader,
  TextInput,
} from 'flowbite-react'

const FormModalCode = () => {
  const [formModal, setFormModal] = useState(false)
  const [email, setEmail] = useState('')
  function onCloseModal() {
    setFormModal(false)
    setEmail('')
  }

  return (
    <div>
      <div>
        <Button
          onClick={() => setFormModal(true)}
          className='px-10'
          color='info'>
          Modal with form elements
        </Button>
        <Modal show={formModal} size='md' onClose={onCloseModal} popup>
          <ModalHeader className='p-6'>Sign in to our platform</ModalHeader>
          <ModalBody>
            <div className='space-y-6'>
              <div>
                <div className='mb-2 block'>
                  <Label htmlFor='email'>Your email</Label>
                </div>
                <TextInput
                  id='email'
                  placeholder='name@company.com'
                  value={email}
                  onChange={(event) => setEmail(event.target.value)}
                  required
                />
              </div>
              <div>
                <div className='mb-2 block'>
                  <Label htmlFor='password'>Your password</Label>
                </div>
                <TextInput id='password' type='password' required />
              </div>
              <div className='flex justify-between'>
                <div className='flex items-center gap-2'>
                  <Checkbox id='remember' />
                  <Label htmlFor='remember'>Remember me</Label>
                </div>
                <a
                  href='#'
                  className='text-sm text-cyan-700 hover:underline dark:text-cyan-500'>
                  Lost Password?
                </a>
              </div>
              <div className='w-full'>
                <Button className=' bg-primary'>Log in to your account</Button>
              </div>
              <div className='flex justify-between text-sm font-medium text-gray-500 dark:text-gray-300'>
                Not registered?&nbsp;
                <a
                  href='#'
                  className='text-cyan-700 hover:underline dark:text-cyan-500'>
                  Create account
                </a>
              </div>
            </div>
          </ModalBody>
        </Modal>
      </div>
    </div>
  )
}

export default FormModalCode

import { useState } from 'react'
import {
  Button,
  Modal,
  ModalBody,
  ModalFooter,
  ModalHeader,
  Select,
} from 'flowbite-react'

const PlacementModalCode = () => {
  const [placeModal, setPlaceModal] = useState(false)
  const [modalPlacement, setModalPlacement] = useState('center')

  return (
    <div>
      <div>
        <div className='flex flex-wrap gap-4'>
          <div className='w-40'>
            <Select
              defaultValue='center'
              onChange={(event) => setModalPlacement(event.target.value)}>
              <option value='center'>Center</option>
              <option value='top-left'>Top left</option>
              <option value='top-center'>Top center</option>
              <option value='top-right'>Top right</option>
              <option value='center-left'>Center left</option>
              <option value='center-right'>Center right</option>
              <option value='bottom-right'>Bottom right</option>
              <option value='bottom-center'>Bottom center</option>
              <option value='bottom-left'>Bottom left</option>
            </Select>
          </div>
          <Button
            onClick={() => setPlaceModal(true)}
            className='w-fit'
            color='error'>
            Toggle Modal
          </Button>
        </div>
        <Modal
          show={placeModal}
          position={modalPlacement}
          onClose={() => setPlaceModal(false)}>
          <ModalHeader className='pb-0'>Small modal</ModalHeader>
          <ModalBody>
            <div className='space-y-6'>
              <p className='text-base leading-relaxed text-gray-500 dark:text-gray-400'>
                With less than a month to go before the European Union enacts
                new consumer privacy laws for its citizens, companies around the
                world are updating their terms of service agreements to comply.
              </p>
              <p className='text-base leading-relaxed text-gray-500 dark:text-gray-400'>
                The European Union’s General Data Protection Regulation
                (G.D.P.R.) goes into effect on May 25 and is meant to ensure a
                common set of data rights in the European Union. It requires
                organizations to notify users as soon as possible of high-risk
                data breaches that could personally affect them.
              </p>
            </div>
          </ModalBody>
          <ModalFooter>
            <Button
              onClick={() => setPlaceModal(false)}
              className='bg-primary '>
              I accept
            </Button>
            <Button color='gray' onClick={() => setPlaceModal(false)}>
              Decline
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    </div>
  )
}

export default PlacementModalCode