@@ -10,6 +10,8 @@ import { emitKeypressEvents } from 'readline';
10
10
import NativeSelect from '@material-ui/core/NativeSelect' ;
11
11
import FormControl from '@material-ui/core/FormControl' ;
12
12
import { styleContext } from '../../containers/AppContainer' ;
13
+ import MenuItem from '@material-ui/core/MenuItem' ;
14
+ import Select from '@material-ui/core/Select' ;
13
15
14
16
const BottomTabs = ( ) => {
15
17
// state that controls which tab the user is on
@@ -20,11 +22,17 @@ const BottomTabs = () => {
20
22
const [ theme , setTheme ] = useState ( 'solarized_light' ) ;
21
23
const { style } = useContext ( styleContext ) ;
22
24
25
+
23
26
// breaks if handleChange is commented out
24
27
const handleChange = ( event : React . ChangeEvent , value : number ) => {
25
28
setTab ( value ) ;
26
29
} ;
27
-
30
+ // Allows users to toggle project between "next.js" and "Classic React"
31
+ // When a user changes the project type, the code of all components is rerendered
32
+ const handleProjectChange = event => {
33
+ const projectType = event . target . value ;
34
+ dispatch ( { type : 'CHANGE PROJECT TYPE' , payload : { projectType } } ) ;
35
+ } ;
28
36
const { components, HTMLTypes } = state ;
29
37
30
38
const changeTheme = e => {
@@ -33,7 +41,7 @@ const BottomTabs = () => {
33
41
34
42
return (
35
43
< div className = { classes . root } style = { style } >
36
- < Box display = "flex" justifyContent = "space-between" >
44
+ < Box display = "flex" justifyContent = "space-between" alignItems = "center" paddingBottom = "10px" paddingRight = "10px" >
37
45
< Tabs
38
46
value = { tab }
39
47
onChange = { handleChange }
@@ -53,39 +61,22 @@ const BottomTabs = () => {
53
61
label = "Component Tree"
54
62
/>
55
63
</ Tabs >
56
- { /* Removed all style={{ backgroundColor: '#252526' }} from within each option tag. Its functionality was not apparent on page. */ }
57
- < FormControl >
58
- < div className = "flex-container" >
59
- < div className = "flex1" > </ div >
60
- < NativeSelect
61
- className = "flex2 "
62
- style = { { color : '#091833' } }
63
- value = { theme }
64
- onChange = { changeTheme }
64
+ < div className = { classes . projectTypeWrapper } >
65
+ < FormControl size = 'small' >
66
+ < Select
67
+ variant = "outlined"
68
+ labelId = "project-type-label"
69
+ id = "demo-simple-select "
70
+ className = { classes . projectSelector }
71
+ value = { state . projectType }
72
+ onChange = { handleProjectChange }
65
73
>
66
- < option value = { 'github' } >
67
- Github
68
- </ option >
69
- < option value = { 'monokai' } >
70
- Monokai
71
- </ option >
72
- < option
73
- value = { 'solarized_dark' }
74
- >
75
- Solarized Dark
76
- </ option >
77
- < option
78
- value = { 'solarized_light' }
79
- >
80
- Solarized Light
81
- </ option >
82
- < option value = { 'terminal' } >
83
- Terminal
84
- </ option >
85
-
86
- </ NativeSelect >
87
- </ div >
88
- </ FormControl >
74
+ < MenuItem value = { 'Classic React' } > Classic React</ MenuItem >
75
+ < MenuItem value = { 'Gatsby.js' } > Gatsby.js</ MenuItem >
76
+ < MenuItem value = { 'Next.js' } > Next.js</ MenuItem >
77
+ </ Select >
78
+ </ FormControl >
79
+ </ div >
89
80
</ Box >
90
81
{ tab === 0 && < CodePreview theme = { theme } setTheme = { setTheme } /> }
91
82
{ tab === 1 && < Tree data = { components } /> }
@@ -99,7 +90,8 @@ const useStyles = makeStyles(theme => ({
99
90
backgroundColor : '#3ea3d6' ,
100
91
height : '100%' ,
101
92
color : '#091921' ,
102
- boxShadow : '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
93
+ boxShadow : '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)' ,
94
+
103
95
} ,
104
96
bottomHeader : {
105
97
flex : 1 ,
@@ -154,6 +146,18 @@ const useStyles = makeStyles(theme => ({
154
146
switch : {
155
147
marginRight : '10px' ,
156
148
marginTop : '2px'
149
+ } ,
150
+ projectTypeWrapper : {
151
+ // width: '300px',
152
+ // width: '100%',
153
+ marginTop : '10px' ,
154
+ marginBotton : '10px'
155
+ } ,
156
+ projectSelector : {
157
+ backgroundColor : 'rgba(255,255,255,0.15)' ,
158
+ // width: '300px',
159
+ // width: '100%',
160
+ color : '#fff'
157
161
}
158
162
} ) ) ;
159
163
0 commit comments