context manager tab

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,6 +7,7 @@ import CodePreview from './CodePreview';
 import StylesEditor from './StylesEditor';
 import CustomizationPanel from '../../containers/CustomizationPanel'
 import CreationPanel from './CreationPanel'
+import ContextManager from './ContexManager'
 import Box from '@material-ui/core/Box';
 import Tree from '../../tree/TreeChart';
 import FormControl from '@material-ui/core/FormControl';
@@ -78,6 +79,11 @@ const BottomTabs = (props): JSX.Element => {
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Component Tree"
           />
+          <Tab
+            disableRipple
+            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
+            label="Context Manager"
+          />
         </Tabs>
         <div className={classes.projectTypeWrapper}> 
          <FormControl size='small'>
@@ -101,6 +107,7 @@ const BottomTabs = (props): JSX.Element => {
       {tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
       {tab === 3 && <CodePreview theme={theme} setTheme={setTheme} />}
       {tab === 4 && <Tree data={components} />}
+      {tab === 5 && <ContextManager theme={theme} setTheme={setTheme} />}
     </div>
   );
 };

app/src/components/bottom/ContexManager.tsx

@@ -0,0 +1,19 @@
+import React, { useContext } from 'react';
+import ComponentPanel from '../right/ComponentPanel'
+import ComponentDropDown from '../right/ComponentDropDown'
+import HTMLPanel from '../left/HTMLPanel'
+import { styleContext } from '../../containers/AppContainer';
+
+
+const ContextManager= (props): JSX.Element => {
+  const {style} = useContext(styleContext);
+  return (
+    <div className="creation-panel" style={style}>
+      {/* <HTMLPanel isThemeLight={props.isThemeLight}/> */}
+      {/* <ComponentDropDown isThemeLight={props.isThemeLight}/> */}
+      <ComponentDropDown/>
+    </div>
+  );
+};
+
+export default ContextManager;

app/src/components/bottom/CreationPanel.tsx

@@ -10,6 +10,7 @@ const CreationPanel = (props): JSX.Element => {
   const {style} = useContext(styleContext);
   return (
     <div className="creation-panel" style={style}>
+
       <ComponentPanel isThemeLight={props.isThemeLight}/>
       <HTMLPanel isThemeLight={props.isThemeLight}/>
       <StatePropsPanel isThemeLight={props.isThemeLight}/>

app/src/components/right/ComponentDropDown.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import StateContext from '../../context/context';
+
+export default function ComponentDropDown() {
+  const [age, setAge] = React.useState('');
+  const [componentList, dispatch] = React.useContext(StateContext);
+
+  console.log(componentList);
+  const handleChange = (event: SelectChangeEvent) => {
+    setAge(event.target.value as string);
+  };
+
+  return (
+    <Box sx={{ minWidth: 120 }}>
+      <FormControl fullWidth>
+        <InputLabel id="demo-simple-select-label">Age</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>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}
+