Popover

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Popover, create_popover_manager, Button, create_button_manager } from "sveltekit-ui"

  const manager = create_popover_manager({
    header: "Project details",
    type: "center",
    target_width: 420,
    target_height: 260,
  })

  const open_button = create_button_manager({
    text: "View project details",
    popover_target: () => "popover_" + manager.id,
  })
  const close_button = create_button_manager({
    text: "Done",
    on_click: () => manager.close(),
  })
</script>

<Button manager={open_button} />
<Popover {manager}>
  {#snippet content()}<p>The website is ready for review.</p>{/snippet}
  {#snippet footer()}<Button manager={close_button} />{/snippet}
</Popover>