Page MenuHomePhorge
Files F2707594

modal.tsx
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

modal.tsx
View Options

import { Fragment } from 'react';
import { Dialog, Transition } from '@headlessui/react';
const Modal = (props: { show: boolean; callback: any; title: string; children: any }) => {
return (
<Transition.Root show={props.show} as={Fragment}>
<Dialog as="div" className="fixed z-10 inset-0 overflow-y-auto" onClose={() => props.callback(false)}>
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<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">
<Dialog.Overlay className="fixed inset-0 bg-black bg-opacity-60 transition-opacity" style={{ backdropFilter: 'blur(5px)' }} />
</Transition.Child>
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203;
</span>
<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">
<div className="inline-block align-bottom bg-zinc-950 border border-zinc-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div className="bg-zinc-950 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mt-3 text-center sm:mt-0 sm:text-left">
<Dialog.Title as="h3" className="text-3xl leading-6 font-bold text-zinc-300 mb-[1.5rem]">
{props.title}
</Dialog.Title>
<div className="mt-2">
<span className="text-sm text-zinc-400">{props.children}</span>
</div>
</div>
</div>
</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
);
};
export default Modal;

File Metadata

Mime Type
application/javascript
Expires
Sun, Feb 1, 4:07 PM (1 d, 9 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
493152
Default Alt Text
modal.tsx (2 KB)

Event Timeline