import { Dialog, DialogPanel, DialogTitle } from '@headlessui/react'
import { useState } from 'react'

const BasicDialodCode = () => {
  let [isOpen, setIsOpen] = useState(false)

  function open() {
    setIsOpen(true)
  }

  function close() {
    setIsOpen(false)
  }

  return (
    <div>
      <button onClick={open} className='ui-button bg-primary justify-center'>
        Open Dialog
      </button>

      <Dialog
        open={isOpen}
        as='div'
        className='relative z-10 focus:outline-none'
        onClose={close}>
        <div className='fixed inset-0 z-10 w-screen overflow-y-auto'>
          <div className='flex min-h-full items-center justify-center p-4'>
            <DialogPanel
              transition
              className='ui-background-color w-full max-w-md rounded-lg p-6 shadow-md dark:dark-shadow-md backdrop-blur-2xl duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0'>
              <DialogTitle as='h3' className='text-lg font-semibold text-ld'>
                Payment successful
              </DialogTitle>
              <p className='mt-2 text-sm'>
                Your payment has been successfully submitted. We’ve sent you an
                email with all of the details of your order.
              </p>
              <div className='mt-4 flex gap-3'>
                <button
                  className='ui-button-small px-6 bg-primary'
                  onClick={close}>
                  Got it, thanks!
                </button>
                <button
                  onClick={() => setIsOpen(false)}
                  className='ui-button-small bg-error px-6'>
                  Cancel
                </button>
              </div>
            </DialogPanel>
          </div>
        </div>
      </Dialog>
    </div>
  )
}

export default BasicDialodCode

import { useState } from 'react'
import {
  Description,
  Dialog,
  DialogBackdrop,
  DialogPanel,
  DialogTitle,
} from '@headlessui/react'

const WithBackdropCode = () => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <div>
      <button
        onClick={() => setIsOpen(true)}
        className='ui-button bg-secondary justify-center text-white'>
        Open Dialog
      </button>
      <Dialog
        open={isOpen}
        onClose={() => setIsOpen(false)}
        className='relative z-50'>
        {/* The backdrop, rendered as a fixed sibling to the panel container */}
        <DialogBackdrop className='fixed inset-0 bg-black/30' />

        {/* Full-screen container to center the panel */}
        <div className='fixed inset-0 flex w-screen items-center justify-center p-4'>
          {/* The actual dialog panel  */}
          <DialogPanel
            transition
            className='ui-background-color w-full max-w-md rounded-lg p-6 shadow-md dark:dark-shadow-md backdrop-blur-2xl duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0'>
            <DialogTitle className='text-lg font-semibold text-ld'>
              Deactivate account
            </DialogTitle>
            <Description className='mt-2 text-sm'>
              This will permanently deactivate your account
            </Description>
            <p className='mt-2 text-sm'>
              Are you sure you want to deactivate your account? All of your data
              will be permanently removed.
            </p>
            <div className='flex gap-3 mt-4'>
              <button
                onClick={() => setIsOpen(false)}
                className='ui-button-small bg-error'>
                Cancel
              </button>
              <button
                onClick={() => setIsOpen(false)}
                className='ui-button-small bg-warning'>
                Deactivate
              </button>
            </div>
          </DialogPanel>
        </div>
      </Dialog>
    </div>
  )
}

export default WithBackdropCode

import {
  Description,
  Dialog,
  DialogPanel,
  DialogTitle,
} from '@headlessui/react'
import { useState } from 'react'

const ScrollableDialogCode = () => {
  let [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <button
        onClick={() => setIsOpen(true)}
        className='ui-button bg-success justify-center'>
        Open Dialog
      </button>
      <Dialog
        open={isOpen}
        onClose={() => setIsOpen(false)}
        className='z-50 realtive'>
        <div className='fixed inset-0 w-screen overflow-y-auto p-4'>
          <div className='flex min-h-full items-center justify-center'>
            <DialogPanel className='ui-background-color max-w-lg space-y-4 rounded-lg p-6 shadow-md dark:dark-shadow-md backdrop-blur-2xl duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0'>
              <DialogTitle className='text-lg font-semibold text-ld '>
                Deactivate account
              </DialogTitle>
              <Description className='mt-3 text-sm'>
                This will permanently deactivate your account
              </Description>
              <p className='mt-2 text-sm'>
                Are you sure you want to deactivate your account? All of your
                data will be permanently removed.
              </p>
              <div className='flex gap-3 mt-3'>
                <button
                  className='ui-button-small px-6 bg-warning'
                  onClick={() => setIsOpen(false)}>
                  Cancel
                </button>
                <button
                  onClick={() => setIsOpen(false)}
                  className='ui-button-small bg-error px-6'>
                  Deactivate
                </button>
              </div>
            </DialogPanel>
          </div>
        </div>
      </Dialog>
    </div>
  )
}

export default ScrollableDialogCode

import { Dialog, DialogPanel, DialogTitle } from '@headlessui/react'
import { useState } from 'react'

const TransitionDialogCode = () => {
  let [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <button
        onClick={() => setIsOpen(true)}
        className='ui-button bg-error justify-center'>
        Open Dialog
      </button>

      <Dialog
        open={isOpen}
        onClose={() => setIsOpen(false)}
        transition
        className='fixed inset-0 flex w-screen items-center justify-center bg-black/30 p-4 transition duration-300 ease-out data-[closed]:opacity-0 z-50'>
        <div className='fixed inset-0 z-50 w-screen overflow-y-auto'>
          <div className='flex min-h-full items-center justify-center p-4'>
            <DialogPanel
              transition
              className='ui-background-color w-full max-w-md rounded-lg p-6 shadow-md dark:dark-shadow-md'>
              <DialogTitle as='h3' className='text-lg font-semibold text-ld'>
                Transition Dialog
              </DialogTitle>
              <p className='mt-2 text-sm'>
                Your payment has been successfully submitted. We’ve sent you an
                email with all of the details of your order.
              </p>
              <div className='mt-4 flex gap-3'>
                <button
                  className='ui-button-small px-6 bg-primary'
                  onClick={() => setIsOpen(false)}>
                  Got it, thanks!
                </button>
                <button
                  onClick={() => setIsOpen(false)}
                  className='ui-button-small bg-error px-6'>
                  Cancel
                </button>
              </div>
            </DialogPanel>
          </div>
        </div>
      </Dialog>
    </div>
  )
}

export default TransitionDialogCode

import {
  Description,
  Dialog,
  DialogPanel,
  DialogTitle,
} from '@headlessui/react'
import { AnimatePresence, motion } from 'framer-motion'
import { useState } from 'react'

const FramerMotionDialogCode = () => {
  let [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <button
        onClick={() => setIsOpen(true)}
        className='ui-button bg-warning justify-center'>
        Open dialog
      </button>
      <AnimatePresence>
        {isOpen && (
          <Dialog
            static
            open={isOpen}
            onClose={() => setIsOpen(false)}
            className='relative z-50'>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className='fixed inset-0 bg-black/30'
            />
            <div className='fixed inset-0 flex w-screen items-center justify-center p-4'>
              <DialogPanel
                as={motion.div}
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.95 }}
                className='ui-background-color w-full max-w-md rounded-lg p-6 shadow-md dark:dark-shadow-md'>
                <DialogTitle className='text-lg font-semibold text-ld'>
                  Framer Motion Dialog
                </DialogTitle>
                <Description className='mt-2 text-sm'>
                  This will permanently deactivate your account
                </Description>
                <p className='mt-2 text-sm'>
                  Are you sure you want to deactivate your account? All of your
                  data will be permanently removed.
                </p>
                <div className='flex gap-3 mt-5'>
                  <button
                    onClick={() => setIsOpen(false)}
                    className='ui-button-small px-6 bg-warning'>
                    Cancel
                  </button>
                  <button
                    onClick={() => setIsOpen(false)}
                    className='ui-button-small px-6 bg-error'>
                    Deactivate
                  </button>
                </div>
              </DialogPanel>
            </div>
          </Dialog>
        )}
      </AnimatePresence>
    </div>
  )
}

export default FramerMotionDialogCode