Popover

() => {
  return (
    <Popover>
      <PopoverTrigger>
        <Button variant="primary">Click me</Button>
      </PopoverTrigger>

      <PopoverContent>This is the content of the popover</PopoverContent>
    </Popover>
  );
};

() => {
  return (
    <Popover>
      <PopoverTrigger>
        <Button variant="primary">Click me</Button>
      </PopoverTrigger>

      <PopoverContent showCloseButton>
        This popover can be closed with a close button
      </PopoverContent>
    </Popover>
  );
};

() => {
  return (
    <Flex gap="2">
      {["top", "right", "bottom", "left"].map((placement) => (
        <Popover
          key={placement}
          positioning={{
            placement,
          }}
        >
          <PopoverTrigger>
            <Button variant="primary">{placement}</Button>
          </PopoverTrigger>

          <PopoverContent>This is the content of the popover</PopoverContent>
        </Popover>
      ))}
    </Flex>
  );
};

() => {
  return (
    <Flex gap="2">
      {["sm", "md", "lg"].map((size) => (
        <Popover key={size} size={size}>
          <PopoverTrigger>
            <Button variant="primary">{size}</Button>
          </PopoverTrigger>

          <PopoverContent>
            You can use different popover sizes for varying content, but keep in
            mind that popovers are not ideal for displaying large amounts of
            content.
          </PopoverContent>
        </Popover>
      ))}
    </Flex>
  );
};

() => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Stack gap="2">
      <Button variant="secondary" onClick={() => setIsOpen(!isOpen)}>
        Open popover from outside
      </Button>

      {`The popover is ${isOpen ? "open" : "closed"}`}

      <Popover
        onOpenChange={(details) => setIsOpen(details.open)}
        open={isOpen}
      >
        <PopoverTrigger>
          <Button variant="primary">Click me</Button>
        </PopoverTrigger>

        <PopoverContent showCloseButton>
          This popover can be closed with a close button
        </PopoverContent>
      </Popover>
    </Stack>
  );
};