"use client"
 
import * as React from "react"
 
import { usePortal } from "@/hooks/use-portal"
 
export function Component() {
  const [open, setOpen] = React.useState(false)
 
  const { Portal } = usePortal()
 
  return (
    <div>
      <button
        onClick={() => {
          setOpen((prev) => !prev)
        }}
      >
        Toggle Portal
      </button>
 
      {open && (
        <Portal>
          <div className="fixed left-0 top-0 flex h-full w-full items-center justify-center bg-black/50">
            <div className="rounded bg-white p-4 shadow">
              <h1>Portal Content</h1>
              <button onClick={() => setOpen(false)}>Close</button>
            </div>
          </div>
        </Portal>
      )}
    </div>
  )
}