Showing
1 changed file
with
36 additions
and
6 deletions
1 | import React from "react"; | 1 | import React from "react"; |
2 | +import { Link } from "react-router-dom"; | ||
2 | import styled from "styled-components"; | 3 | import styled from "styled-components"; |
3 | import Header from "../../Components/Header"; | 4 | import Header from "../../Components/Header"; |
4 | import Footer from "../../Components/Footer"; | 5 | import Footer from "../../Components/Footer"; |
... | @@ -29,7 +30,7 @@ const ContentMain = styled.main` | ... | @@ -29,7 +30,7 @@ const ContentMain = styled.main` |
29 | `; | 30 | `; |
30 | 31 | ||
31 | const MainTabBox = styled.div` | 32 | const MainTabBox = styled.div` |
32 | - margin: 10px 0px; | 33 | + margin: 20px 0px; |
33 | width: 100%; | 34 | width: 100%; |
34 | font-size: 1.5rem; | 35 | font-size: 1.5rem; |
35 | `; | 36 | `; |
... | @@ -39,6 +40,7 @@ const MainSection = styled.section``; | ... | @@ -39,6 +40,7 @@ const MainSection = styled.section``; |
39 | const PostList = styled.ul` | 40 | const PostList = styled.ul` |
40 | display: flex; | 41 | display: flex; |
41 | flex-direction: column; | 42 | flex-direction: column; |
43 | + margin: 20px 0px; | ||
42 | `; | 44 | `; |
43 | 45 | ||
44 | const PostItem = styled.li` | 46 | const PostItem = styled.li` |
... | @@ -47,6 +49,10 @@ const PostItem = styled.li` | ... | @@ -47,6 +49,10 @@ const PostItem = styled.li` |
47 | &.post-header { | 49 | &.post-header { |
48 | background-color: #eaeaea; | 50 | background-color: #eaeaea; |
49 | } | 51 | } |
52 | + &.post-footer { | ||
53 | + background-color: #eaeaea; | ||
54 | + height: 30px; | ||
55 | + } | ||
50 | `; | 56 | `; |
51 | 57 | ||
52 | const TopicList = styled.ul` | 58 | const TopicList = styled.ul` |
... | @@ -71,11 +77,30 @@ const TopicItem = styled.li` | ... | @@ -71,11 +77,30 @@ const TopicItem = styled.li` |
71 | } | 77 | } |
72 | `; | 78 | `; |
73 | 79 | ||
74 | -const PaginationBox = styled.div``; | 80 | +const PaginationBox = styled.div` |
81 | + width: 100%; | ||
82 | + margin-bottom: 20px; | ||
83 | +`; | ||
75 | 84 | ||
76 | -const PaginationList = styled.ul``; | 85 | +const PaginationList = styled.ul` |
86 | + display: flex; | ||
87 | + flex-direction: row; | ||
88 | + justify-content: center; | ||
89 | + align-items: center; | ||
90 | +`; | ||
77 | 91 | ||
78 | -const PaginationItem = styled.li``; | 92 | +const PaginationItem = styled.li` |
93 | + font-size: 1.5rem; | ||
94 | + a { | ||
95 | + margin: 0px 10px; | ||
96 | + } | ||
97 | +`; | ||
98 | + | ||
99 | +const PaginationSpan = styled.span` | ||
100 | + background: #eaeaea; | ||
101 | + border-radius: 5px; | ||
102 | + margin: 0px 10px; | ||
103 | +`; | ||
79 | 104 | ||
80 | export default () => { | 105 | export default () => { |
81 | return ( | 106 | return ( |
... | @@ -86,7 +111,7 @@ export default () => { | ... | @@ -86,7 +111,7 @@ export default () => { |
86 | <HeaderSpan>Forums</HeaderSpan> | 111 | <HeaderSpan>Forums</HeaderSpan> |
87 | </ContentHeader> | 112 | </ContentHeader> |
88 | <ContentMain> | 113 | <ContentMain> |
89 | - <MainTabBox>Tab</MainTabBox> | 114 | + <MainTabBox>Viewing 20 topics</MainTabBox> |
90 | <MainSection> | 115 | <MainSection> |
91 | <PostList> | 116 | <PostList> |
92 | <PostItem className="post-header"> | 117 | <PostItem className="post-header"> |
... | @@ -105,11 +130,16 @@ export default () => { | ... | @@ -105,11 +130,16 @@ export default () => { |
105 | <TopicItem className="topic-date">2020-Date</TopicItem> | 130 | <TopicItem className="topic-date">2020-Date</TopicItem> |
106 | </TopicList> | 131 | </TopicList> |
107 | </PostItem> | 132 | </PostItem> |
133 | + <PostItem className="post-footer" /> | ||
108 | </PostList> | 134 | </PostList> |
109 | </MainSection> | 135 | </MainSection> |
110 | <PaginationBox> | 136 | <PaginationBox> |
111 | <PaginationList> | 137 | <PaginationList> |
112 | - <PaginationItem>paging number</PaginationItem> | 138 | + <PaginationItem> |
139 | + <PaginationSpan>1</PaginationSpan> | ||
140 | + <Link to="/">2</Link> | ||
141 | + <Link to="/">3</Link> | ||
142 | + </PaginationItem> | ||
113 | </PaginationList> | 143 | </PaginationList> |
114 | </PaginationBox> | 144 | </PaginationBox> |
115 | </ContentMain> | 145 | </ContentMain> | ... | ... |
-
Please register or login to post a comment