2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
df723d9e 1 parent e800ee09

add state, update form styling

Inline Side-by-side
Showing 1 changed file with 44 additions and 27 deletions
......@@ -19,8 +19,18 @@ const Wrapper = styled.div`
}
`;
const HideWrapper = styled.div`
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
background-color: #535c68;
opacity: 0.6;
`;
const FormContainer = styled.div`
visibility: hidden;
display: flex;
position: fixed;
background-color: #f5f6fa;
......@@ -143,35 +153,42 @@ const StyledLink = styled(Link)`
}
`;
export default ({ roomArray, action }) => {
export default ({ roomArray, action, setAction }) => {
return (
<Wrapper>
<Header text={"KhuChat"}></Header>
<RoomWrapper>
<RoomContainer>
<RoomUL>
{roomArray &&
roomArray.map((e) => (
<StyledLink to={e.name} key={e.id}>
<RoomItem>{e.name}</RoomItem>
<FontAwesomeIcon icon={faArrowRight} />
</StyledLink>
))}
</RoomUL>
</RoomContainer>
<CreateContainer>
<StyledLink to="/">
<span>Create New Room</span>
</StyledLink>
</CreateContainer>
</RoomWrapper>
<FormContainer>
<Form>
<FormText>Room Name</FormText>
<Input placeholder="Enter new Room name" />
<Button text="Submit" />
</Form>
</FormContainer>
{action === "showList" ? (
<>
<RoomWrapper>
<RoomContainer>
<RoomUL>
{roomArray &&
roomArray.map((e) => (
<StyledLink to={e.name} key={e.id}>
<RoomItem>{e.name}</RoomItem>
<FontAwesomeIcon icon={faArrowRight} />
</StyledLink>
))}
</RoomUL>
</RoomContainer>
<CreateContainer>
<StyledLink to="/" onClick={() => setAction("makeList")}>
<span>Create New Room</span>
</StyledLink>
</CreateContainer>
</RoomWrapper>
</>
) : (
<HideWrapper className="hideWrapper">
<FormContainer>
<Form>
<FormText>Room Name</FormText>
<Input placeholder="Enter new Room name" />
<Button text="Submit" />
</Form>
</FormContainer>
</HideWrapper>
)}
</Wrapper>
);
};
......