Popover

import { Popover, Button } from "@hummingbirdui/react";

export default function PopoverDefault() {
  return (
    <Popover>
      <Popover.Trigger asChild>
        <Button>Open popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Popover.Header>Popover title</Popover.Header>
        <Popover.Body>
          And here&apos;s some amazing content. It&apos;s very engaging. Right?
        </Popover.Body>
      </Popover.Content>
    </Popover>
  );
}

import { Popover, Button } from "@hummingbirdui/react";

export default function PopoverPlacement() {
  return (
    <div className="flex flex-wrap gap-2">
      <Popover>
        <Popover.Trigger asChild>
          <Button variant="outline">Top</Button>
        </Popover.Trigger>
        <Popover.Content side="top">
          <Popover.Body>Opens above the trigger.</Popover.Body>
        </Popover.Content>
      </Popover>

      <Popover>
        <Popover.Trigger asChild>
          <Button variant="outline">Right</Button>
        </Popover.Trigger>
        <Popover.Content side="right">
          <Popover.Body>Opens to the right.</Popover.Body>
        </Popover.Content>
      </Popover>

      <Popover>
        <Popover.Trigger asChild>
          <Button variant="outline">Bottom</Button>
        </Popover.Trigger>
        <Popover.Content side="bottom">
          <Popover.Body>Opens below the trigger.</Popover.Body>
        </Popover.Content>
      </Popover>

      <Popover>
        <Popover.Trigger asChild>
          <Button variant="outline">Left</Button>
        </Popover.Trigger>
        <Popover.Content side="left">
          <Popover.Body>Opens to the left.</Popover.Body>
        </Popover.Content>
      </Popover>
    </div>
  );
}

import { Popover, Button, CloseButton } from "@hummingbirdui/react";

export default function PopoverWithClose() {
  return (
    <Popover>
      <Popover.Trigger asChild>
        <Button>Dismissable</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Popover.Header className="flex items-center justify-between">
          Heads up
          <Popover.Close asChild>
            <CloseButton />
          </Popover.Close>
        </Popover.Header>
        <Popover.Body>
          Click the close button to dismiss this popover.
        </Popover.Body>
      </Popover.Content>
    </Popover>
  );
}

import * as React from "react";
import { Popover, Button } from "@hummingbirdui/react";

export default function PopoverControlled() {
  const [open, setOpen] = React.useState(false);

  return (
    <div className="flex items-center justify-center gap-3">
      <Popover open={open} onOpenChange={setOpen}>
        <Popover.Trigger asChild>
          <Button>Toggle popover</Button>
        </Popover.Trigger>
        <Popover.Content>
          <Popover.Header>Controlled</Popover.Header>
          <Popover.Body>
            The open state is driven by React through <code>open</code> and{" "}
            <code>onOpenChange</code>.
          </Popover.Body>
        </Popover.Content>
      </Popover>
      <span className="text-sm">State: {open ? "open" : "closed"}</span>
    </div>
  );
}