sdy

add state, change link button style

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>
......