1- import React from " react" ;
2- import { Flex , Stack , Center , Text , useMediaQuery } from " @chakra-ui/react" ;
3- import { ArrayInputType } from " ../../constants" ;
4- import InputField from " ../InputField" ;
1+ import React from ' react' ;
2+ import { Flex , Stack , Center , Text , useMediaQuery } from ' @chakra-ui/react' ;
3+ import { ArrayInputType } from ' ../../constants' ;
4+ import InputField from ' ../InputField' ;
55
66const Roles = ( { variables, setVariables } : any ) => {
7- const [ isNotSmallerScreen ] = useMediaQuery ( "(min-width:600px)" ) ;
8- return (
9- < div >
10- { " " }
11- < Text fontSize = "md" paddingTop = "2%" fontWeight = "bold" mb = { 5 } >
12- Roles
13- </ Text >
14- < Stack spacing = { 6 } padding = "2% 0%" >
15- < Flex direction = { isNotSmallerScreen ? "row" : "column" } >
16- < Flex w = "30%" justifyContent = "start" alignItems = "center" >
17- < Text fontSize = "sm" > Roles:</ Text >
18- </ Flex >
19- < Center
20- w = { isNotSmallerScreen ? "70%" : "100%" }
21- mt = { isNotSmallerScreen ? "0" : "2" }
22- overflow = "hidden"
23- >
24- < InputField
25- borderRadius = { 7 }
26- variables = { variables }
27- setVariables = { setVariables }
28- inputType = { ArrayInputType . ROLES }
29- />
30- </ Center >
31- </ Flex >
32- < Flex direction = { isNotSmallerScreen ? "row" : "column" } >
33- < Flex w = "30%" justifyContent = "start" alignItems = "center" >
34- < Text fontSize = "sm" > Default Roles:</ Text >
35- </ Flex >
36- < Center
37- w = { isNotSmallerScreen ? "70%" : "100%" }
38- mt = { isNotSmallerScreen ? "0" : "2" }
39- >
40- < InputField
41- variables = { variables }
42- setVariables = { setVariables }
43- inputType = { ArrayInputType . DEFAULT_ROLES }
44- />
45- </ Center >
46- </ Flex >
47- < Flex direction = { isNotSmallerScreen ? "row" : "column" } >
48- < Flex w = "30%" justifyContent = "start" alignItems = "center" >
49- < Text fontSize = "sm" > Protected Roles:</ Text >
50- </ Flex >
51- < Center
52- w = { isNotSmallerScreen ? "70%" : "100%" }
53- mt = { isNotSmallerScreen ? "0" : "2" }
54- >
55- < InputField
56- variables = { variables }
57- setVariables = { setVariables }
58- inputType = { ArrayInputType . PROTECTED_ROLES }
59- />
60- </ Center >
61- </ Flex >
62- </ Stack >
63- </ div >
64- ) ;
7+ const [ isNotSmallerScreen ] = useMediaQuery ( '(min-width:600px)' ) ;
8+
9+ return (
10+ < div >
11+ { ' ' }
12+ < Text fontSize = "md" paddingTop = "2%" fontWeight = "bold" mb = { 5 } >
13+ Roles
14+ </ Text >
15+ < Stack spacing = { 6 } padding = "2% 0%" >
16+ < Flex direction = { isNotSmallerScreen ? 'row' : 'column' } >
17+ < Flex w = "30%" justifyContent = "start" alignItems = "center" >
18+ < Text fontSize = "sm" > Roles:</ Text >
19+ </ Flex >
20+ < Center
21+ w = { isNotSmallerScreen ? '70%' : '100%' }
22+ mt = { isNotSmallerScreen ? '0' : '2' }
23+ overflow = "hidden"
24+ >
25+ < InputField
26+ borderRadius = { 7 }
27+ variables = { variables }
28+ setVariables = { setVariables }
29+ inputType = { ArrayInputType . ROLES }
30+ />
31+ </ Center >
32+ </ Flex >
33+ < Flex direction = { isNotSmallerScreen ? 'row' : 'column' } >
34+ < Flex w = "30%" justifyContent = "start" alignItems = "center" >
35+ < Text fontSize = "sm" > Default Roles:</ Text >
36+ </ Flex >
37+ < Center
38+ w = { isNotSmallerScreen ? '70%' : '100%' }
39+ mt = { isNotSmallerScreen ? '0' : '2' }
40+ >
41+ < InputField
42+ variables = { variables }
43+ setVariables = { setVariables }
44+ inputType = { ArrayInputType . DEFAULT_ROLES }
45+ />
46+ </ Center >
47+ </ Flex >
48+ < Flex direction = { isNotSmallerScreen ? 'row' : 'column' } >
49+ < Flex w = "30%" justifyContent = "start" alignItems = "center" >
50+ < Text fontSize = "sm" > Protected Roles:</ Text >
51+ </ Flex >
52+ < Center
53+ w = { isNotSmallerScreen ? '70%' : '100%' }
54+ mt = { isNotSmallerScreen ? '0' : '2' }
55+ >
56+ < InputField
57+ variables = { variables }
58+ setVariables = { setVariables }
59+ inputType = { ArrayInputType . PROTECTED_ROLES }
60+ />
61+ </ Center >
62+ </ Flex >
63+ </ Stack >
64+ </ div >
65+ ) ;
6566} ;
6667
67- export default Roles ;
68+ export default Roles ;
0 commit comments