sdy

create forum presenter

1 +import React from "react";
2 +import styled from "styled-components";
3 +import Header from "../../Components/Header";
4 +import Footer from "../../Components/Footer";
5 +
6 +const ContentWrapper = styled.div`
7 + display: flex;
8 + flex-direction: column;
9 + padding-top: 4.3rem;
10 + padding-bottom: 5rem;
11 +`;
12 +
13 +const ContentHeader = styled.header`
14 + background-color: black;
15 + display: flex;
16 + justify-content: center;
17 + align-items: center;
18 + height: 300px;
19 +`;
20 +
21 +const HeaderSpan = styled.span`
22 + color: white;
23 + font-size: 3rem;
24 +`;
25 +
26 +const ContentMain = styled.main`
27 + width: 80%;
28 + margin: 0 auto;
29 +`;
30 +
31 +const MainTabBox = styled.div`
32 + margin: 10px 0px;
33 + width: 100%;
34 + font-size: 1.5rem;
35 +`;
36 +
37 +const MainSection = styled.section``;
38 +
39 +const PostList = styled.ul`
40 + display: flex;
41 + flex-direction: column;
42 +`;
43 +
44 +const PostItem = styled.li`
45 + display: flex;
46 + flex-direction: row;
47 + &.post-header {
48 + background-color: #eaeaea;
49 + }
50 +`;
51 +
52 +const TopicList = styled.ul`
53 + width: 100%;
54 + display: flex;
55 + flex-direction: row;
56 + margin: 10px 0px;
57 +`;
58 +
59 +const TopicItem = styled.li`
60 + font-size: 1.5rem;
61 + padding: 10px;
62 + &.topic-title {
63 + text-align: left;
64 + width: 55%;
65 + }
66 + &.topic-view,
67 + &.topic-reply,
68 + &.topic-date {
69 + text-align: center;
70 + width: 15%;
71 + }
72 +`;
73 +
74 +const PaginationBox = styled.div``;
75 +
76 +const PaginationList = styled.ul``;
77 +
78 +const PaginationItem = styled.li``;
79 +
80 +export default () => {
81 + return (
82 + <>
83 + <Header />
84 + <ContentWrapper>
85 + <ContentHeader>
86 + <HeaderSpan>Forums</HeaderSpan>
87 + </ContentHeader>
88 + <ContentMain>
89 + <MainTabBox>Tab</MainTabBox>
90 + <MainSection>
91 + <PostList>
92 + <PostItem className="post-header">
93 + <TopicList>
94 + <TopicItem className="topic-title">Topic</TopicItem>
95 + <TopicItem className="topic-view">View</TopicItem>
96 + <TopicItem className="topic-reply">Reply</TopicItem>
97 + <TopicItem className="topic-date">Date</TopicItem>
98 + </TopicList>
99 + </PostItem>
100 + <PostItem className="post-content">
101 + <TopicList>
102 + <TopicItem className="topic-title">Title-One</TopicItem>
103 + <TopicItem className="topic-view">One-View</TopicItem>
104 + <TopicItem className="topic-reply">Zero-Reply</TopicItem>
105 + <TopicItem className="topic-date">2020-Date</TopicItem>
106 + </TopicList>
107 + </PostItem>
108 + </PostList>
109 + </MainSection>
110 + <PaginationBox>
111 + <PaginationList>
112 + <PaginationItem>paging number</PaginationItem>
113 + </PaginationList>
114 + </PaginationBox>
115 + </ContentMain>
116 + </ContentWrapper>
117 + <Footer />
118 + </>
119 + );
120 +};