#Popover 气泡卡片

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

export function PopoverBasic() {
  return (
    <Flex gap="md" align="center" wrap justify="center">
      <Popover title="项目信息" content="在此查看项目概览和最近更新。">
        <Button variant="outline">点击查看</Button>
      </Popover>
      <Popover
        title="提示"
        trigger="hover"
        placement="right"
        content="这里可以查看项目的更多说明。"
      >
        <Button variant="outline">悬停查看</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="编辑项目"
      open={open}
      onOpenChange={setOpen}
      width={260}
      content={
        <Form
          layout="vertical"
          onSubmit={(event) => {
            event.preventDefault();
            setOpen(false);
          }}
        >
          <FormField label="项目名称">
            <Input defaultValue="Leaf Garden" />
          </FormField>
          <Button type="submit">保存并关闭</Button>
        </Form>
      }
    >
      <Button variant="outline">点击编辑</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="项目提示"
          content="浮层会根据可用空间调整位置。"
        >
          <Button variant="outline">
            {{ top: '上方', bottom: '下方', left: '左侧', right: '右侧' }[placement]}
          </Button>
        </Popover>
      ))}
    </Flex>
  );
}