Showing
1 changed file
with
24 additions
and
13 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: white; | ||
71 | + color: black; | ||
72 | + border: 2px solid #3dc1d3; | ||
73 | + padding: 16px 32px; | ||
74 | + margin: 4px 2px; | ||
75 | + transition-duration: 0.4s; | ||
76 | + border-radius: 8px; | ||
77 | + &:hover { | ||
70 | background-color: #3dc1d3; | 78 | background-color: #3dc1d3; |
71 | - color: #f1f2f6; | 79 | + color: white; |
72 | - text-align: center; | 80 | + } |
73 | - font-size: 18px; | ||
74 | - font-weight: 500; | ||
75 | - width: 150px; | ||
76 | - border: none; | ||
77 | - border-radius: 10px; | ||
78 | - cursor: pointer; | ||
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> |
108 | + {btnState === "main" ? ( | ||
109 | + <> | ||
107 | <StartBox> | 110 | <StartBox> |
108 | <StartLink to="/auth">Start</StartLink> | 111 | <StartLink to="/auth">Start</StartLink> |
109 | </StartBox> | 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