#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="Project settings"
        onClose={() => setOpen(false)}
        footer={
          <>
            <Button variant="outline" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button type="submit" form="drawer-project">
              Save
            </Button>
          </>
        }
      >
        <Form
          id="drawer-project"
          onSubmit={(event) => {
            event.preventDefault();
            setOpen(false);
          }}
        >
          <FormField label="Project name" required>
            <Input name="name" defaultValue="Leaf Garden" />
          </FormField>
          <FormField label="Project type">
            <Select
              name="type"
              defaultValue="design"
              options={[
                { value: 'design', label: 'Design' },
                { value: 'development', label: 'Development' },
              ]}
            />
          </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)}>
        {'Resizable workspace'}
      </Button>
      <Drawer
        title={'Workspace'}
        open={open}
        onClose={() => setOpen(false)}
        resizable
        minSize={260}
        maxSize={640}
      >
        <Space direction="vertical">
          <Input aria-label="Project" />
          <Button onClick={() => setChild(true)}>{'Open details'}</Button>
        </Space>
        <Drawer
          open={child}
          onClose={() => setChild(false)}
          title={'Details'}
          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)}>
        {'Notification preferences'}
      </Button>
      <Drawer
        open={open}
        width={440}
        title={'Notification preferences'}
        description={'Choose the right update frequency for you.'}
        icon={<Bell />}
        onClose={() => setOpen(false)}
        footer={
          <>
            <Button variant="outline" onClick={() => setOpen(false)}>
              {'Cancel'}
            </Button>
            <Button onClick={() => setOpen(false)}>{'Save'}</Button>
          </>
        }
      >
        <Space direction="vertical" align="stretch" size={20}>
          <RadioGroup
            variant="list"
            label={'Activity summary'}
            value={frequency}
            onChange={(event) => setFrequency(event.target.value)}
            options={[
              {
                value: 'daily',
                label: 'Daily',
                description: 'A daily team activity digest',
              },
              {
                value: 'weekly',
                label: 'Weekly',
                description: 'A summary every Monday',
              },
              {
                value: 'off',
                label: 'No summary',
                description: 'Receive only important updates',
              },
            ]}
          />
          <Alert
            type="info"
            title={'Important alerts stay enabled'}
            description={'Security events and actions requiring your attention are always delivered.'}
          />
        </Space>
      </Drawer>
    </>
  );
}