sdy

add button component

...@@ -3,6 +3,7 @@ import { Link } from "react-router-dom"; ...@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
3 import styled from "styled-components"; 3 import styled from "styled-components";
4 import Header from "../../Components/Header"; 4 import Header from "../../Components/Header";
5 import Footer from "../../Components/Footer"; 5 import Footer from "../../Components/Footer";
6 +import Button from "../../Components/Button";
6 7
7 const ContentWrapper = styled.div` 8 const ContentWrapper = styled.div`
8 display: flex; 9 display: flex;
...@@ -30,9 +31,23 @@ const ContentMain = styled.main` ...@@ -30,9 +31,23 @@ const ContentMain = styled.main`
30 `; 31 `;
31 32
32 const MainTabBox = styled.div` 33 const MainTabBox = styled.div`
34 + display: flex;
35 + justify-content: space-between;
36 + align-items: center;
33 margin: 20px 0px; 37 margin: 20px 0px;
34 width: 100%; 38 width: 100%;
39 + span {
35 font-size: 1.5rem; 40 font-size: 1.5rem;
41 + color: black;
42 + }
43 + button {
44 + width: 70px;
45 + height: 30px;
46 + border-radius: 4px;
47 + border: 1px solid black;
48 + background-color: white;
49 + cursor: pointer;
50 + }
36 `; 51 `;
37 52
38 const MainSection = styled.section``; 53 const MainSection = styled.section``;
...@@ -111,7 +126,10 @@ export default () => { ...@@ -111,7 +126,10 @@ export default () => {
111 <HeaderSpan>Forums</HeaderSpan> 126 <HeaderSpan>Forums</HeaderSpan>
112 </ContentHeader> 127 </ContentHeader>
113 <ContentMain> 128 <ContentMain>
114 - <MainTabBox>Viewing 20 topics</MainTabBox> 129 + <MainTabBox>
130 + <HeaderSpan>Viewing 20 topics</HeaderSpan>
131 + <Button text="Post" />
132 + </MainTabBox>
115 <MainSection> 133 <MainSection>
116 <PostList> 134 <PostList>
117 <PostItem className="post-header"> 135 <PostItem className="post-header">
......