#Popover

import { Button, Flex, Popover } from '@ifhover/leaf-ui';

export function PopoverBasic() {
  return (
    <Flex gap="md" align="center" wrap justify="center">
      <Popover title="Project details" content="See project details and recent updates here.">
        <Button variant="outline">Click for details</Button>
      </Popover>
      <Popover
        title="Hint"
        trigger="hover"
        placement="right"
        content="Find more project information here."
      >
        <Button variant="outline">Hover for details</Button>
      </Popover>
    </Flex>
  );
}

import { Button, Form, FormField, Input, Popover } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function PopoverControlled() {
  const [open, setOpen] = useState(false);
  return (
    <Popover
      title="Edit project"
      open={open}
      onOpenChange={setOpen}
      width={260}
      content={
        <Form
          layout="vertical"
          onSubmit={(event) => {
            event.preventDefault();
            setOpen(false);
          }}
        >
          <FormField label="Project name">
            <Input defaultValue="Leaf Garden" />
          </FormField>
          <Button type="submit">Save and close</Button>
        </Form>
      }
    >
      <Button variant="outline">Click to edit</Button>
    </Popover>
  );
}

import { Button, Flex, Popover } from '@ifhover/leaf-ui';

export function PopoverPlacements() {
  return (
    <Flex gap="md" align="center" wrap justify="center">
      {(['top', 'bottom', 'left', 'right'] as const).map((placement) => (
        <Popover
          key={placement}
          placement={placement}
          title="Project hint"
          content="The panel adjusts to available space."
        >
          <Button variant="outline">
            {{ top: 'Top', bottom: 'Bottom', left: 'Left', right: 'Right' }[placement]}
          </Button>
        </Popover>
      ))}
    </Flex>
  );
}