Showing
1 changed file
with
20 additions
and
3 deletions
... | @@ -19,8 +19,18 @@ const Wrapper = styled.div` | ... | @@ -19,8 +19,18 @@ const Wrapper = styled.div` |
19 | } | 19 | } |
20 | `; | 20 | `; |
21 | 21 | ||
22 | +const HideWrapper = styled.div` | ||
23 | + display: flex; | ||
24 | + flex-direction: column; | ||
25 | + width: 100%; | ||
26 | + height: 100%; | ||
27 | + justify-content: center; | ||
28 | + align-items: center; | ||
29 | + background-color: #535c68; | ||
30 | + opacity: 0.6; | ||
31 | +`; | ||
32 | + | ||
22 | const FormContainer = styled.div` | 33 | const FormContainer = styled.div` |
23 | - visibility: hidden; | ||
24 | display: flex; | 34 | display: flex; |
25 | position: fixed; | 35 | position: fixed; |
26 | background-color: #f5f6fa; | 36 | background-color: #f5f6fa; |
... | @@ -143,10 +153,12 @@ const StyledLink = styled(Link)` | ... | @@ -143,10 +153,12 @@ const StyledLink = styled(Link)` |
143 | } | 153 | } |
144 | `; | 154 | `; |
145 | 155 | ||
146 | -export default ({ roomArray, action }) => { | 156 | +export default ({ roomArray, action, setAction }) => { |
147 | return ( | 157 | return ( |
148 | <Wrapper> | 158 | <Wrapper> |
149 | <Header text={"KhuChat"}></Header> | 159 | <Header text={"KhuChat"}></Header> |
160 | + {action === "showList" ? ( | ||
161 | + <> | ||
150 | <RoomWrapper> | 162 | <RoomWrapper> |
151 | <RoomContainer> | 163 | <RoomContainer> |
152 | <RoomUL> | 164 | <RoomUL> |
... | @@ -160,11 +172,14 @@ export default ({ roomArray, action }) => { | ... | @@ -160,11 +172,14 @@ export default ({ roomArray, action }) => { |
160 | </RoomUL> | 172 | </RoomUL> |
161 | </RoomContainer> | 173 | </RoomContainer> |
162 | <CreateContainer> | 174 | <CreateContainer> |
163 | - <StyledLink to="/"> | 175 | + <StyledLink to="/" onClick={() => setAction("makeList")}> |
164 | <span>Create New Room</span> | 176 | <span>Create New Room</span> |
165 | </StyledLink> | 177 | </StyledLink> |
166 | </CreateContainer> | 178 | </CreateContainer> |
167 | </RoomWrapper> | 179 | </RoomWrapper> |
180 | + </> | ||
181 | + ) : ( | ||
182 | + <HideWrapper className="hideWrapper"> | ||
168 | <FormContainer> | 183 | <FormContainer> |
169 | <Form> | 184 | <Form> |
170 | <FormText>Room Name</FormText> | 185 | <FormText>Room Name</FormText> |
... | @@ -172,6 +187,8 @@ export default ({ roomArray, action }) => { | ... | @@ -172,6 +187,8 @@ export default ({ roomArray, action }) => { |
172 | <Button text="Submit" /> | 187 | <Button text="Submit" /> |
173 | </Form> | 188 | </Form> |
174 | </FormContainer> | 189 | </FormContainer> |
190 | + </HideWrapper> | ||
191 | + )} | ||
175 | </Wrapper> | 192 | </Wrapper> |
176 | ); | 193 | ); |
177 | }; | 194 | }; | ... | ... |
-
Please register or login to post a comment