component boxes

Co-authored-by: Huy Pham [email protected]
Co-authored-by: Sal Saluga [email protected]
Co-authored-by: Ken Bains [email protected]

Author: Bianca Picasso

app/src/components/bottom/BottomTabs.tsx

@@ -7,7 +7,7 @@ import CodePreview from './CodePreview';
 import StylesEditor from './StylesEditor';
 import CustomizationPanel from '../../containers/CustomizationPanel'
 import CreationPanel from './CreationPanel'
-import ContextManager from './ContexManager'
+import ContextManager from './ContextManager'
 import Box from '@material-ui/core/Box';
 import Tree from '../../tree/TreeChart';
 import FormControl from '@material-ui/core/FormControl';

app/src/components/bottom/ContexManager.tsx

@@ -0,0 +1 @@
+import ContextAssigner from 'app/src/components/right/ContextAssigner.tsx';

app/src/components/bottom/ContextInput.tsx

@@ -0,0 +1,40 @@
+import React, { useContext } from 'react';
+import ComponentPanel from '../right/ComponentPanel';
+import ContextAssigner from '../right/ContextAssigner';
+import ContextMenu from '../right/ContextMenu';
+import ContextTree from '../right/ContextTree';
+import HTMLPanel from '../left/HTMLPanel';
+import { styleContext } from '../../containers/AppContainer';
+import CssBaseline from '@mui/material/CssBaseline';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import { styled } from '@mui/material/styles';
+
+
+
+const ContextManager= (props): JSX.Element => {
+  // const {style} = useContext(styleContext);
+  return (
+    <React.Fragment>
+    {/* <CssBaseline /> */}
+    <Container style={{"backgroundColor": "white", "height" : "100%", "width": "100%"}} >
+      <Box display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={0}>
+        <Box gridColumn="span 4" style={{"border": "1px solid black", "height": "100%"}}>
+          <Box style={{"height" : "50em", "border": "1px solid black"}}>
+            <ContextMenu />
+          </Box>
+          <Box style={{"height" : "50em", "border": "1px solid black"}}>
+            <ContextAssigner/>
+          </Box>
+        </Box>
+        <Box gridColumn="span 8"  style={{"border": "1px solid black"}}>
+          <ContextTree/>
+        </Box>
+      </Box>
+    </Container>
+  </React.Fragment>
+
+  );
+};
+
+export default ContextManager;

app/src/components/bottom/ContextManager.tsx

@@ -6,7 +6,7 @@ import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import StateContext from '../../context/context';
 
-export default function ComponentDropDown() {
+export default function ContextAssigner() {
   const [age, setAge] = React.useState('');
   const [componentList, dispatch] = React.useContext(StateContext);
 
@@ -16,22 +16,22 @@ export default function ComponentDropDown() {
   };
 
   return (
-    <Box sx={{ minWidth: 120 }}>
+
+    <Box sx={{ minWidth:100 }}>
       <FormControl fullWidth>
-        <InputLabel id="demo-simple-select-label">Age</InputLabel>
+        <InputLabel id="demo-simple-select-label">Select Component</InputLabel>
         <Select
           labelId="demo-simple-select-label"
           id="demo-simple-select"
           value={age}
           label="Age"
           onChange={handleChange}
         >
-          <MenuItem value={10}>Ten</MenuItem>
-          <MenuItem value={20}>Twenty</MenuItem>
-          <MenuItem value={30}>Thirty</MenuItem>
+          {componentList.components.map((component) => {
+           return <MenuItem value={component.name}>{component.name}</MenuItem>
+          })}
         </Select>
       </FormControl>
     </Box>
   );
-}
-
+}

app/src/components/right/ComponentDropDown.tsx renamed to app/src/components/right/ContextAssigner.tsx

@@ -0,0 +1,14 @@
+/* imput component
+input component
+button component
+*/
+import React from 'react';
+
+
+const ContextMenu = () => {
+  return (
+    <h1>This is from context menu</h1>
+  )
+}
+
+export default ContextMenu;

app/src/components/right/ContextMenu.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ContextTree = () => {
+  return (
+    <h1>Our beautiful tree is here</h1>
+  )
+}
+
+export default ContextTree;