#Popover

---
import Popover from "../popover.astro";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <Popover id="astro-demo-popover-default" title="Popover Title">
    This is the popover content. Click outside to close.
  </Popover>

  <Button id="astro-demo-popover-trigger">Open Popover</Button>
</div>

<script>
  import { usePopover } from "@pindoba/astro-popover/use-popover";

  const trigger = document.getElementById("astro-demo-popover-trigger");
  usePopover({ id: "astro-demo-popover-default", trigger });
</script>

<script lang="ts">
  import Popover from "../popover.svelte";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <Popover id="demo-popover-default" title="Popover Title">
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps}>Open Popover</Button>
    {/snippet}
    This is the popover content. Click outside to close.
  </Popover>
</div>

---
import Popover from "../popover.astro";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "md",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Popover id="astro-demo-popover-top" title="Top">
    Placed above the trigger.
  </Popover>
  <Button id="astro-demo-popover-top-trigger">Top</Button>

  <Popover id="astro-demo-popover-bottom" title="Bottom">
    Placed below the trigger.
  </Popover>
  <Button id="astro-demo-popover-bottom-trigger">Bottom</Button>

  <Popover id="astro-demo-popover-left" title="Left">
    Placed to the left.
  </Popover>
  <Button id="astro-demo-popover-left-trigger">Left</Button>

  <Popover id="astro-demo-popover-right" title="Right">
    Placed to the right.
  </Popover>
  <Button id="astro-demo-popover-right-trigger">Right</Button>
</div>

<script>
  import { usePopover } from "@pindoba/astro-popover/use-popover";

  usePopover({
    id: "astro-demo-popover-top",
    trigger: document.getElementById("astro-demo-popover-top-trigger"),
    placement: "top",
  });
  usePopover({
    id: "astro-demo-popover-bottom",
    trigger: document.getElementById("astro-demo-popover-bottom-trigger"),
    placement: "bottom",
  });
  usePopover({
    id: "astro-demo-popover-left",
    trigger: document.getElementById("astro-demo-popover-left-trigger"),
    placement: "left",
  });
  usePopover({
    id: "astro-demo-popover-right",
    trigger: document.getElementById("astro-demo-popover-right-trigger"),
    placement: "right",
  });
</script>

<script lang="ts">
  import Popover from "../popover.svelte";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div
  class={stack({
    gap: "md",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Popover id="demo-popover-top" placement="top" title="Top">
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps}>Top</Button>
    {/snippet}
    Placed above the trigger.
  </Popover>

  <Popover id="demo-popover-bottom" placement="bottom" title="Bottom">
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps}>Bottom</Button>
    {/snippet}
    Placed below the trigger.
  </Popover>

  <Popover id="demo-popover-left" placement="left" title="Left">
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps}>Left</Button>
    {/snippet}
    Placed to the left.
  </Popover>

  <Popover id="demo-popover-right" placement="right" title="Right">
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps}>Right</Button>
    {/snippet}
    Placed to the right.
  </Popover>
</div>