text: import { useEditor } from '@craftjs/core';
  import {
    Box,
    Typography,
    Grid,
    Button as MaterialButton,
  } from '@material-ui/core';
  import React from 'react';
  
  import { Button } from './user/Button';
  import { Card } from './user/Card';
  import { Text } from './user/Text';
  
  export const Toolbox = () => {
    const { connectors } = useEditor();
  
    return (
      <Box px={2} py={2}>
        <Grid
          container
          direction="column"
          alignItems="center"
          justify="center"
          spacing={1}
        >
          <Box pb={2}>
            <Typography>Drag to add</Typography>
          </Box>
          <Grid container direction="column" item>
            <MaterialButton
              ref={(ref) =>
                connectors.create(ref, <Button text="Click me" size="small" />)
              }
              variant="contained"
            >
              Button
            </MaterialButton>
          </Grid>
          <Grid container direction="column" item>
            <MaterialButton
              ref={(ref) => connectors.create(ref, <Text text="Hi world" />)}
              variant="contained"
            >
              Text
            </MaterialButton>
          </Grid>
          <Grid container direction="column" item>
            <MaterialButton
              ref={(ref) => connectors.create(ref, <Card />)}
              variant="contained"
            >
              Card
            </MaterialButton>
          </Grid>
        </Grid>
      </Box>
    );
  };
  