다이얼로그 구현하기

import { Dialog } from "@chakra-ui/react"
import { defineModal, modalId } from "@muvel-plugins/modal"
 
type SearchModalProps = {
  keyword: string
}
 
const SearchModal: React.FC<SearchModalProps> = (props) => {
  return (
    <Dialog.Content maxW="600px" w="90vw">
      {/* 실제 폼/콘텐츠 */}
      {props.keyword}
    </Dialog.Content>
  )
}
 
export const searchModalId = modalId<SearchModalProps>("search-modal")
export const searchModal = defineModal<SearchModalProps>(searchModalId, {
  component: SearchModal,
  props: {
    root: { placement: "center" },
  },
})

import { modalPluginId } from "@muvel-plugins/modal"
 
setup: async (mgr, ctx) => {
  const modalApi = mgr.use(ctx, modalPluginId)
  const disposer = modalApi.register(searchModal)
 
  return { disposer }
},
dispose: async (state) => {
  state.disposer()
},

api: {
  openSearch: (ctx, keyword: string) => {
    const modalApi = ctx.api(modalPluginId)
    modalApi.open(searchModalId, { keyword })
  },
  closeSearch: (ctx) => {
    const modalApi = ctx.api(modalPluginId)
    modalApi.close(searchModalId)
  },
}

const myApi = usePluginApi(myPluginId)
myApi.openSearch("muvel")