Add ide scaffold or ideas

related to #218

web/src/components/IdeConsole/IdeConsole.js

@@ -0,0 +1,23 @@
+import { useContext } from 'react'
+import { IdeContext } from 'src/components/IdeToolbarNew'
+
+const IdeConsole = () => {
+  const { state } = useContext(IdeContext)
+  return (
+    <div className="p-8 border-2 m-2">
+      <div className="pb-4">hi I'm console</div>
+      <div>
+        {state.consoleMessages?.map(({ type, message }, index) => (
+          <div
+            className={'font-mono ' + (type === 'error' ? 'text-red-500' : '')}
+            key={message + index}
+          >
+            -> {message}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default IdeConsole

web/src/components/IdeContainer/IdeContainer.js

@@ -0,0 +1,18 @@
+import IdeEditor from 'src/components/IdeEditor'
+import IdeViewer from 'src/components/IdeViewer'
+import IdeConsole from 'src/components/IdeConsole'
+
+const IdeContainer = () => {
+  return (
+    <div className="p-8 border-2">
+      <h2>hi I'm IDE container</h2>
+      <div className="flex">
+        <IdeEditor />
+        <IdeViewer />
+        <IdeConsole />
+      </div>
+    </div>
+  )
+}
+
+export default IdeContainer

web/src/components/IdeEditor/IdeEditor.js

@@ -0,0 +1,29 @@
+import { useContext } from 'react'
+import { IdeContext } from 'src/components/IdeToolbarNew'
+
+const IdeEditor = () => {
+  const { state, dispatch } = useContext(IdeContext)
+  return (
+    <div className="p-8 border-2 m-2">
+      <div>hi I'm editor</div>
+      <div className="pb-2">code:</div>
+      <input
+        value={state.code}
+        className="font-mono"
+        onChange={({ target }) =>
+          dispatch({ type: 'updateCode', payload: target.value })
+        }
+      />
+      <button
+        onClick={() =>
+          dispatch({ type: 'render', payload: { code: state.code } })
+        }
+        className="m-2 border-2 shadow-md p-2 rounded"
+      >
+        Render plz
+      </button>
+    </div>
+  )
+}
+
+export default IdeEditor

web/src/components/IdeToolbarNew/IdeToolbarNew.js

@@ -0,0 +1,19 @@
+import IdeContainer from 'src/components/IdeContainer'
+import { createContext } from 'react'
+import { useIdeState } from 'src/helpers/hooks/useIdeState'
+
+export const IdeContext = createContext()
+
+const IdeToolbarNew = () => {
+  const [state, dispatch] = useIdeState()
+  return (
+    <IdeContext.Provider value={{ state, dispatch }}>
+      <div className="p-8 border-2">
+        <div>hi I'm the toolbar</div>
+        <IdeContainer />
+      </div>
+    </IdeContext.Provider>
+  )
+}
+
+export default IdeToolbarNew

web/src/components/IdeViewer/IdeViewer.js

@@ -0,0 +1,18 @@
+import { useContext } from 'react'
+import { IdeContext } from 'src/components/IdeToolbarNew'
+
+const IdeViewer = () => {
+  const { state } = useContext(IdeContext)
+  return (
+    <div className="p-8 border-2 m-2">
+      <div className="pb-4">hi I'm viewer</div>
+      <div>
+        I should be showing an{' '}
+        <span className="font-mono uppercase">{state.objectData?.type}</span>{' '}
+        right now
+      </div>
+    </div>
+  )
+}
+
+export default IdeViewer