add responsive icon

src/components/ResponsiveToolBar.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { Flex, IconButton, useTheme } from '@chakra-ui/react'
+import { HiOutlineDesktopComputer } from 'react-icons/hi'
+import { MdOutlineTabletMac } from 'react-icons/md'
+import { ImMobile } from 'react-icons/im'
+import useDispatch from '~hooks/useDispatch'
+import { getEditorWidth } from '~core/selectors/app'
+import { useSelector } from 'react-redux'
+
+const ResponsiveToolBar = () => {
+  const dispatch = useDispatch()
+  const theme = useTheme()
+  const editorWidth = useSelector(getEditorWidth)
+
+  return (
+    <Flex
+      w="100%"
+      p={4}
+      backgroundSize="20px 20px"
+      bgColor="#edf2f6"
+      align="center"
+      justify="center"
+      position="absolute"
+      zIndex={10}
+      boxShadow="lg"
+    >
+      <IconButton
+        icon={<HiOutlineDesktopComputer />}
+        size="lg"
+        fontSize="30px"
+        color={editorWidth === '100%' ? 'teal.500' : 'black.500'}
+        aria-label="Desktop version"
+        onClick={() => dispatch.app.updateEditorWidth({ width: '100%' })}
+      />
+
+      <IconButton
+        icon={<MdOutlineTabletMac />}
+        size="lg"
+        color={editorWidth === theme.breakpoints.md ? 'teal.500' : 'black.500'}
+        fontSize="30px"
+        aria-label="Tablet version"
+        mx={12}
+        onClick={() =>
+          dispatch.app.updateEditorWidth({ width: theme.breakpoints.md })
+        }
+      />
+
+      <IconButton
+        icon={<ImMobile />}
+        size="lg"
+        color={editorWidth === theme.breakpoints.sm ? 'teal.500' : 'black.500'}
+        fontSize="30px"
+        aria-label="Mobile version"
+        onClick={() =>
+          dispatch.app.updateEditorWidth({ width: theme.breakpoints.sm })
+        }
+      />
+    </Flex>
+  )
+}
+
+export default ResponsiveToolBar

src/core/models/app.ts

@@ -6,6 +6,7 @@ export type AppState = {
   showLayout: boolean
   showCode: boolean
   inputTextFocused: boolean
+  editorWidth: string
   overlay: undefined | Overlay
 }
 
@@ -14,6 +15,7 @@ const app = createModel({
     showLayout: true,
     showCode: false,
     inputTextFocused: false,
+    editorWidth: '100%',
     overlay: undefined,
   } as AppState,
   reducers: {
@@ -41,6 +43,12 @@ const app = createModel({
         overlay,
       }
     },
+    updateEditorWidth(state: AppState, payload: { width: string }): AppState {
+      return {
+        ...state,
+        editorWidth: payload.width,
+      }
+    },
     'components/deleteComponent': (state: AppState): AppState => {
       return {
         ...state,

src/core/selectors/app.ts

@@ -10,3 +10,5 @@ export const getFocusedComponent = (id: IComponent['id']) => (
 
 export const getInputTextFocused = (state: RootState) =>
   state.app.inputTextFocused
+
+export const getEditorWidth = (state: RootState) => state.app.editorWidth

src/pages/index.tsx

@@ -11,8 +11,13 @@ import EditorErrorBoundary from '~components/errorBoundaries/EditorErrorBoundary
 import Editor from '~components/editor/Editor'
 import { InspectorProvider } from '~contexts/inspector-context'
 import Inspector from '~components/inspector/Inspector'
+import ResponsiveToolBar from '~components/ResponsiveToolBar'
+import { useSelector } from 'react-redux'
+import { getEditorWidth } from '~core/selectors/app'
 
 const App = () => {
+  const editorWidth = useSelector(getEditorWidth)
+
   useShortcuts()
 
   return (
@@ -28,8 +33,20 @@ const App = () => {
         <Flex h="calc(100vh - 3rem)">
           <Sidebar />
           <EditorErrorBoundary>
-            <Box bg="white" flex={1} position="relative">
-              <Editor />
+            <Box bg="#edf2f6" flex={1} position="relative">
+              <ResponsiveToolBar />
+              <Flex
+                w={editorWidth}
+                transition="all ease 0.5s"
+                h="100%"
+                align="center"
+                justify="center"
+                alignItems="stretch"
+                pt={12}
+                m="0 auto"
+              >
+                <Editor />
+              </Flex>
             </Box>
           </EditorErrorBoundary>