shadcn/ui Dialog

open の管理は内部に閉じながら、Trigger の見た目のみ利用側で指定する

const SomeDialog: React.FC<{
  triggerProps: React.ComponentProps<typeof DialogTrigger>
}> = ({ triggerProps }) => {
  const [open, setOpen] = useState(false)
  // [Next.js で searchParams を使う場合]
  // const searchParams = useSearchParams()
  // const open = searchParams.get('some') != null
  // const setOpen = (open: boolean) => {
  //   const newSearchParams = new URLSearchParams(searchParams)
  //   if (open) {
  //     newSearchParams.set('some', '1')
  //   } else {
  //     newSearchParams.delete('some')
  //   }
  //   router.push(`?${newSearchParams}`)
  // }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger {...triggerProps} />
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{/* Title */}</DialogTitle>
        </DialogHeader>
        {/* Content*/}
        <DialogFooter>
          {/* Footer */}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
<SomeDialog triggerProps={{
  asChild: true,
  children: (
    <Button type="button">Open</Button>
  )
}} />

<SomeDialog triggerProps={{
  asChild: true,
  children: (
    <Button type="button" variant="ghost" size="icon">
      <PlusIcon />
    </Button>
  )
}} />