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>); } ;