Drawer

import { useState } from 'react';
import {
  Autocomplete,
  Box,
  Button,
  Drawer,
  DrawerProps,
  Grid,
  GridColumn,
  GridRow,
  SegmentedControl,
  SegmentedControlButton,
  Select,
  TextInput,
} from '@arctic-kit/snow';

function Demo() {
  const [isDrawerOpen, setDrawerOpen] = useState(false);
  const toggleDrawer = () => {
    setDrawerOpen(!isDrawerOpen);
  };
  return (
    <Box sx={{ display: 'flex' }}>
      <Button onClick={toggleDrawer}>Toggle Drawer</Button>
      <Drawer
        title="Drawer Title" titleFooter="Title Footer section" position="left" size="medium" cancelLabel="Cancel" actionLabel="Save" actionSize="medium"
        open={isDrawerOpen}
        onOpenChange={toggleDrawer}
        onCancel={toggleDrawer}
        onAction={toggleDrawer}
        onClose={toggleDrawer}
      >
        <Grid spacing={1}>
          <GridRow>
            <GridColumn xs={12} lg={6}>
              <SegmentedControl>
                <SegmentedControlButton>React</SegmentedControlButton>
                <SegmentedControlButton>Angular</SegmentedControlButton>
                <SegmentedControlButton>Vue</SegmentedControlButton>
              </SegmentedControl>
            </GridColumn>
            <GridColumn xs={12} lg={6}>
              <TextInput label='First name' />
            </GridColumn>
            <GridColumn xs={12} lg={6}>
              <TextInput label='Second name' />
            </GridColumn>
            <GridColumn xs={12} lg={6}>
              <Select
                label='Fruit'
                options={[
                  'Apple',
                  'Banana',
                  'Orange',
                  'Mango',
                  'Pineapple',
                  'Grapes',
                  'Strawberry',
                  'Watermelon',
                  'Kiwi',
                  'Peach',
                  'Plum',
                ]}
                placeholder='Select a fruit'
              />
            </GridColumn>
            <GridColumn xs={12} lg={6}>
              <Autocomplete
                label='Car'
                options={['Audi', 'BMW', 'Chevrolet', 'Dodge']}
                placeholder='Select a car'
              />
            </GridColumn>
          </GridRow>
        </Grid>
      </Drawer>
    </Box>
  );
}