Flow of modal context

1. create btn (any where)

 <Btn onClick={handleOpenModal} variant="solid"> Open Modal </Btn>

handleOpenModal => contains the code of main component we will pass

• provider_type
• (close)=>(react node main)
• options{}

1. now call

    const { open } = useAppProvider();

we only have open because we already passing close in modal

1. AppProvider => contains the main code of provider so that it can be called anywhere

 <AppContext.Provider value={{ open, close }}>
      {children}
      {stack.map((item) => (
        <div key={item.id}>
          {item.type === APP_PROVIDER_TYPE.modal && (
            <Modal options={item.options || {}} onClose={() => close(item.id)}>
              {item.content({
                close: () => close(item.id),
              })}
            </Modal>
          )}
          {/* You can add PANEL here later! */}
        </div>
      ))}
    </AppContext.Provider>

1. this modal comp is the main comp which contains the actual react node

export const Modal = ({ children, onClose, options }: ModalBaseProps) => {
  return (
    <Potral>
      <Backdrop {...options} onClose={onClose}>
        {children}
      </Backdrop>
    </Potral>
  );
};

1. potral here will potral the actual content at the bottom of code seperately and backdrop is just another comp that creates a backdrop screen in which main content will render