Showing
1 changed file
with
28 additions
and
17 deletions
| 1 | -import React from "react"; | 1 | +import React, { useState } from "react"; |
| 2 | import styled from "styled-components"; | 2 | import styled from "styled-components"; |
| 3 | import { Link } from "react-router-dom"; | 3 | import { Link } from "react-router-dom"; |
| 4 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | 4 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; |
| ... | @@ -67,18 +67,22 @@ const StartBox = styled.div` | ... | @@ -67,18 +67,22 @@ const StartBox = styled.div` |
| 67 | `; | 67 | `; |
| 68 | 68 | ||
| 69 | const StartLink = styled(Link)` | 69 | const StartLink = styled(Link)` |
| 70 | - background-color: #3dc1d3; | 70 | + background-color: white; |
| 71 | - color: #f1f2f6; | 71 | + color: black; |
| 72 | - text-align: center; | 72 | + border: 2px solid #3dc1d3; |
| 73 | - font-size: 18px; | 73 | + padding: 16px 32px; |
| 74 | - font-weight: 500; | 74 | + margin: 4px 2px; |
| 75 | - width: 150px; | 75 | + transition-duration: 0.4s; |
| 76 | - border: none; | 76 | + border-radius: 8px; |
| 77 | - border-radius: 10px; | 77 | + &:hover { |
| 78 | - cursor: pointer; | 78 | + background-color: #3dc1d3; |
| 79 | + color: white; | ||
| 80 | + } | ||
| 79 | `; | 81 | `; |
| 80 | 82 | ||
| 81 | -export default () => { | 83 | +export default ({ btnStateProp }) => { |
| 84 | + const [btnState] = useState(btnStateProp ? btnStateProp : "main"); | ||
| 85 | + | ||
| 82 | return ( | 86 | return ( |
| 83 | <Header> | 87 | <Header> |
| 84 | <Nav> | 88 | <Nav> |
| ... | @@ -100,13 +104,20 @@ export default () => { | ... | @@ -100,13 +104,20 @@ export default () => { |
| 100 | <HeaderMenuItem> | 104 | <HeaderMenuItem> |
| 101 | <Link to="/news">News</Link> | 105 | <Link to="/news">News</Link> |
| 102 | </HeaderMenuItem> | 106 | </HeaderMenuItem> |
| 103 | - <HeaderMenuItem> | ||
| 104 | - <Link to="/support">Support US</Link> | ||
| 105 | - </HeaderMenuItem> | ||
| 106 | </HeaderMenuList> | 107 | </HeaderMenuList> |
| 107 | - <StartBox> | 108 | + {btnState === "main" ? ( |
| 108 | - <StartLink to="/auth">Start</StartLink> | 109 | + <> |
| 109 | - </StartBox> | 110 | + <StartBox> |
| 111 | + <StartLink to="/auth">Start</StartLink> | ||
| 112 | + </StartBox> | ||
| 113 | + </> | ||
| 114 | + ) : ( | ||
| 115 | + <> | ||
| 116 | + <StartBox> | ||
| 117 | + <StartLink to="/roomlist">RoomList</StartLink> | ||
| 118 | + </StartBox> | ||
| 119 | + </> | ||
| 120 | + )} | ||
| 110 | </HeaderMenuNav> | 121 | </HeaderMenuNav> |
| 111 | </HeaderBox> | 122 | </HeaderBox> |
| 112 | </Nav> | 123 | </Nav> | ... | ... |
-
Please register or login to post a comment