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 className="mt-4">
      <button onClick={open} className="ui-button bg-primary justify-center">
                Open Dialog
              </button>

      <Dialog
          open={isOpen}
          as="div"
          className="relative z-10 focus:outline-hidden"
          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="w-full max-w-md rounded-lg bg-white dark:bg-darkgray 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 text-bodytext">
                  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-info"
                    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 {
  Description,
  Dialog,
  DialogBackdrop,
  DialogPanel,
  DialogTitle,
} from "@headlessui/react";
import { useState } from "react";


const WithBackdropCode = () => {
  let [isOpen, setIsOpen] = useState(false);
  return (
    <>
    <div className="mt-4">
      <button onClick={() => setIsOpen(true)} className="ui-button bg-secondary justify-center">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="w-full max-w-md rounded-lg bg-white dark:bg-darkgray 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 text-bodytext">
                This will permanently deactivate your account
              </Description>
              <p className="mt-2 text-sm text-bodytext">
                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 className="mt-4">
       <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="max-w-lg space-y-4 rounded-lg bg-white dark:bg-darkgray 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 text-bodytext">
                  This will permanently deactivate your account
                </Description>
                <p className="mt-2 text-sm text-bodytext">
                  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-info"
                    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 className="mt-4">
        <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="w-full max-w-md rounded-lg bg-white dark:bg-darkgray 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 text-bodytext">
                  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-info"
                    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 className="mt-4">
      <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="w-full max-w-md rounded-lg bg-white dark:bg-darkgray 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 text-bodytext">
                    This will permanently deactivate your account
                  </Description>
                  <p className="mt-2 text-sm text-bodytext">
                    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-error"
                    >
                      Cancel
                    </button>
                    <button
                      onClick={() => setIsOpen(false)}
                      className="ui-button-small px-6 bg-warning"
                    >
                      Deactivate
                    </button>
                  </div>
                </DialogPanel>
              </div>
            </Dialog>
          )}
        </AnimatePresence>
    </div>
    </>
  );
};

export default FramerMotionDialogCode;