/home/smartbloks/.trash/extendify/src/Library/components/modals/SplitModal.js
import { Fragment, forwardRef, useRef } from '@wordpress/element'
import { __ } from '@wordpress/i18n'
import { Icon, close } from '@wordpress/icons'
import { Dialog, Transition } from '@headlessui/react'
import { useGlobalStore } from '@library/state/GlobalState'
export const SplitModal = forwardRef(
(
{
onClose,
isOpen,
invertedButtonColor,
children,
leftContainerBgColor = 'bg-white',
rightContainerBgColor = 'bg-gray-100',
},
initialFocus,
) => {
const focusBackup = useRef(null)
const defaultClose = useGlobalStore((state) => state.removeAllModals)
onClose = onClose ?? defaultClose
return (
<Transition.Root appear show={true} as={Fragment}>
<Dialog
as="div"
static
open={isOpen}
className="extendify"
initialFocus={initialFocus ?? focusBackup}
onClose={onClose}>
<div className="fixed inset-0 z-high flex">
<Transition.Child
as={Fragment}
enter="ease-out duration-50 transition"
enterFrom="opacity-0"
enterTo="opacity-100">
<Dialog.Overlay className="fixed inset-0 bg-black bg-opacity-40 transition-opacity" />
</Transition.Child>
<Transition.Child
as={Fragment}
enter="ease-out duration-300 translate transform"
enterFrom="opacity-0 translate-y-4 sm:translate-y-5"
enterTo="opacity-100 translate-y-0">
<div className="m-auto">
<div className="relative m-8 max-w-md justify-between rounded-sm shadow-modal md:m-0 md:flex md:max-w-2xl">
<button
onClick={onClose}
ref={focusBackup}
className="absolute top-0 right-0 block cursor-pointer rounded-md bg-transparent p-4 text-gray-700 opacity-30 hover:opacity-100"
style={
invertedButtonColor && {
filter: 'invert(1)',
}
}>
<span className="sr-only">
{__('Close', 'extendify')}
</span>
<Icon icon={close} />
</button>
<div
className={`w-7/12 p-12 ${leftContainerBgColor}`}>
{children[0]}
</div>
<div
className={`hidden w-6/12 md:block ${rightContainerBgColor}`}>
{children[1]}
</div>
</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
)
},
)