mirror of
https://github.com/DI0IK/homepage-plus.git
synced 2025-07-10 15:28:47 +00:00
first public source commit
This commit is contained in:
parent
1a4fbb9d42
commit
3914fee775
65 changed files with 4697 additions and 312 deletions
68
src/components/modal.jsx
Normal file
68
src/components/modal.jsx
Normal file
|
@ -0,0 +1,68 @@
|
|||
import { Fragment, useRef, useState, Children } from "react";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
|
||||
function classNames(...classes) {
|
||||
return classes.filter(Boolean).join(" ");
|
||||
}
|
||||
|
||||
const Modal = ({ Toggle, Content }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const cancelButtonRef = useRef(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toggle open={open} setOpen={setOpen} />
|
||||
<Transition.Root show={open} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-10"
|
||||
initialFocus={cancelButtonRef}
|
||||
onClose={setOpen}
|
||||
>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-theme-900/90 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed z-10 inset-0 overflow-y-auto">
|
||||
<div className="flex items-center justify-center min-h-full">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative rounded-lg shadow-xl transform transition-all my-8 max-w-lg w-full">
|
||||
<Content open={open} setOpen={setOpen} />
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const ModalToggle = ({ open, setOpen, children }) => (
|
||||
<div onClick={() => setOpen(!open)}>{children}</div>
|
||||
);
|
||||
|
||||
const ModalContent = ({ open, setOpen, children }) => (
|
||||
<div className="body">{children}</div>
|
||||
);
|
||||
|
||||
Modal.Toggle = ModalToggle;
|
||||
Modal.Content = ModalContent;
|
||||
|
||||
export default Modal;
|
Loading…
Add table
Add a link
Reference in a new issue