BulkActions

import { BulkActions } from '@saas-ui/pro'

<Box position="relative" height="100px">
  <BulkActions
    selections={['1']}
    actions={
      <>
        <Button>Delete</Button>
      </>
    }
  />
</Box>

<Box position="relative" height="100px">
  <BulkActions
    title=":selections email(s) selected"
    selections={['1']}
    actions={
      <>
        <Button>Delete</Button>
      </>
    }
  />
</Box>

<Box position="relative" height="100px">
  <BulkActions
    selections={['1']}
    actions={
      <>
        <Menu>
          <MenuButton as={Button}>Move to</MenuButton>
          <Portal>
            <MenuList>
              <MenuItem>Inbox</MenuItem>
              <MenuItem>Spam</MenuItem>
            </MenuList>
          </Portal>
        </Menu>
        <Button>Delete</Button>
      </>
    }
  />
</Box>

function Position() {
  const [state, setState] = useState(['1'])
  return (
    <Box position="relative" height="100px">
      <Button onClick={() => setState(['1'])}>Select</Button>
      <BulkActions
        selections={state}
        actions={
          <>
            <Button onClick={() => setState([])}>Delete</Button>
          </>
        }
        top="auto"
        bottom="0"
        motionPreset="slideOutBottom"
      />
    </Box>
  )
}

function CustomStyles() {
  const [state, setState] = useState(['1'])
  return (
    <Box position="relative" height="100px">
      <Button onClick={() => setState(['1'])}>Select</Button>
      <BulkActions
        selections={state}
        actions={
          <>
            <Button onClick={() => setState([])}>Delete</Button>
          </>
        }
        colorScheme="gray"
        motionPreset="slideOutBottom"
        sx={{
          bottom: '40px',
          top: 'auto',
          right: 'auto',
          borderRadius: 'lg',
          boxShadow: 'md',
          maxW: 'container.lg',
        }}
      />
    </Box>
  )
}