artcraft/app/modules/SidePanel/SidePanel.tsx

import {
  Fragment,
  useState
} from 'react'
import { Dialog, Transition } from '@headlessui/react'
import {
  faGears,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { Button } from '~/components/Button';

import { SidePanelInner } from './SidePanelInner';

interface SidePanelPropsI{
  title?: string;
  children: React.ReactNode;
}

export const SidePanel =({
  title,
  children,
}:SidePanelPropsI)=>{

  const [open, setOpen] = useState<boolean>(false);
  const handleOpen = ()=> setOpen(true);
  const handleClose = ()=>setOpen(false);

  return (<>
    <Button 
      className='fixed right-0 top-20 mt-2 mr-4'
      onClick={handleOpen}
    >
      <FontAwesomeIcon className="fa-2xl -mx-2" icon={faGears} />
    </Button>
    <Transition.Root show={open} as={Fragment}>
      <Dialog as="div" className="relative z-10" onClose={setOpen}>
        <div className="fixed inset-0" />

        <div className="fixed inset-0 overflow-hidden">
          <div className="absolute inset-0 overflow-hidden">
            <div className="pointer-events-none inset-y-0 fixed top-16 mt-2 right-0 flex max-w-full pl-10 sm:pl-16">
              <Transition.Child
                as={Fragment}
                enter="transform transition ease-in-out duration-500 sm:duration-700"
                enterFrom="translate-x-full"
                enterTo="translate-x-0"
                leave="transform transition ease-in-out duration-500 sm:duration-700"
                leaveFrom="translate-x-0"
                leaveTo="translate-x-full"
              >
                <Dialog.Panel className="pointer-events-auto w-screen lg:max-w-md">
                  <SidePanelInner
                    title={title}
                    closeCallback={handleClose}
                  >
                    {children}
                  </SidePanelInner>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </div>
      </Dialog>
    </Transition.Root>
  </>);
}