#Drawer 抽屉

import { Button, Drawer, Flex, Form, FormField, Input, Select, Space } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function DrawerBasic() {
  const [placement, setPlacement] = useState<'left' | 'right' | 'top' | 'bottom'>('right');
  const [open, setOpen] = useState(false);
  return (
    <Space direction="vertical" align="stretch">
      <Flex gap="md" align="center" wrap justify="center">
        {(['left', 'right', 'top', 'bottom'] as const).map((side) => (
          <Button
            key={side}
            variant="outline"
            onClick={() => {
              setPlacement(side);
              setOpen(true);
            }}
          >
            {side}
          </Button>
        ))}
      </Flex>
      <Drawer
        open={open}
        placement={placement}
        title="项目设置"
        onClose={() => setOpen(false)}
        footer={
          <>
            <Button variant="outline" onClick={() => setOpen(false)}>
              取消
            </Button>
            <Button type="submit" form="drawer-project">
              保存
            </Button>
          </>
        }
      >
        <Form
          id="drawer-project"
          onSubmit={(event) => {
            event.preventDefault();
            setOpen(false);
          }}
        >
          <FormField label="项目名称" required>
            <Input name="name" defaultValue="Leaf Garden" />
          </FormField>
          <FormField label="项目类型">
            <Select
              name="type"
              defaultValue="design"
              options={[
                { value: 'design', label: '设计项目' },
                { value: 'development', label: '开发项目' },
              ]}
            />
          </FormField>
        </Form>
      </Drawer>
    </Space>
  );
}

import { Button, Drawer, Input, Space } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function Capabilities() {
  const [open, setOpen] = useState(false),
    [child, setChild] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>
        {'可调整宽度的工作区'}
      </Button>
      <Drawer
        title={'工作区'}
        open={open}
        onClose={() => setOpen(false)}
        resizable
        minSize={260}
        maxSize={640}
      >
        <Space direction="vertical">
          <Input aria-label="Project" />
          <Button onClick={() => setChild(true)}>{'查看详情'}</Button>
        </Space>
        <Drawer
          open={child}
          onClose={() => setChild(false)}
          title={'详情'}
          width={300}
          push={120}
        >
          Details
        </Drawer>
      </Drawer>
    </>
  );
}

import { Alert, Button, Drawer, RadioGroup, Space } from '@ifhover/leaf-ui';

import { Bell } from 'lucide-react';

import { useState } from 'react';

export function DrawerSections() {
  
  const [open, setOpen] = useState(false);
  const [frequency, setFrequency] = useState('weekly');
  return (
    <>
      <Button variant="outline" startIcon={<Bell />} onClick={() => setOpen(true)}>
        {'通知偏好'}
      </Button>
      <Drawer
        open={open}
        width={440}
        title={'通知偏好'}
        description={'选择适合你的更新频率。'}
        icon={<Bell />}
        onClose={() => setOpen(false)}
        footer={
          <>
            <Button variant="outline" onClick={() => setOpen(false)}>
              {'取消'}
            </Button>
            <Button onClick={() => setOpen(false)}>{'保存'}</Button>
          </>
        }
      >
        <Space direction="vertical" align="stretch" size={20}>
          <RadioGroup
            variant="list"
            label={'活动摘要'}
            value={frequency}
            onChange={(event) => setFrequency(event.target.value)}
            options={[
              {
                value: 'daily',
                label: '每日',
                description: '每天汇总团队动态',
              },
              {
                value: 'weekly',
                label: '每周',
                description: '每周一接收一份摘要',
              },
              {
                value: 'off',
                label: '关闭摘要',
                description: '仅接收重要提醒',
              },
            ]}
          />
          <Alert
            type="info"
            title={'重要提醒始终发送'}
            description={'安全事件和需要你处理的事项不会被关闭。'}
          />
        </Space>
      </Drawer>
    </>
  );
}