Toggle navigation
Toggle navigation
This project
Loading...
Sign in
2020-1-capstone-design1
/
Triz_Project1
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
1
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
sdy
2020-07-19 02:10:13 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
1121c700a169aa467b29fbd5ee04afe5263be4c2
1121c700
1 parent
68e9ad4a
create forum presenter
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
120 additions
and
0 deletions
front/src/Routes/Forum/ForumPresenter.js
front/src/Routes/Forum/ForumPresenter.js
0 → 100644
View file @
1121c70
import
React
from
"react"
;
import
styled
from
"styled-components"
;
import
Header
from
"../../Components/Header"
;
import
Footer
from
"../../Components/Footer"
;
const
ContentWrapper
=
styled
.
div
`
display: flex;
flex-direction: column;
padding-top: 4.3rem;
padding-bottom: 5rem;
`
;
const
ContentHeader
=
styled
.
header
`
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
`
;
const
HeaderSpan
=
styled
.
span
`
color: white;
font-size: 3rem;
`
;
const
ContentMain
=
styled
.
main
`
width: 80%;
margin: 0 auto;
`
;
const
MainTabBox
=
styled
.
div
`
margin: 10px 0px;
width: 100%;
font-size: 1.5rem;
`
;
const
MainSection
=
styled
.
section
``
;
const
PostList
=
styled
.
ul
`
display: flex;
flex-direction: column;
`
;
const
PostItem
=
styled
.
li
`
display: flex;
flex-direction: row;
&.post-header {
background-color: #eaeaea;
}
`
;
const
TopicList
=
styled
.
ul
`
width: 100%;
display: flex;
flex-direction: row;
margin: 10px 0px;
`
;
const
TopicItem
=
styled
.
li
`
font-size: 1.5rem;
padding: 10px;
&.topic-title {
text-align: left;
width: 55%;
}
&.topic-view,
&.topic-reply,
&.topic-date {
text-align: center;
width: 15%;
}
`
;
const
PaginationBox
=
styled
.
div
``
;
const
PaginationList
=
styled
.
ul
``
;
const
PaginationItem
=
styled
.
li
``
;
export
default
()
=>
{
return
(
<>
<
Header
/>
<
ContentWrapper
>
<
ContentHeader
>
<
HeaderSpan
>
Forums
<
/HeaderSpan
>
<
/ContentHeader
>
<
ContentMain
>
<
MainTabBox
>
Tab
<
/MainTabBox
>
<
MainSection
>
<
PostList
>
<
PostItem
className
=
"post-header"
>
<
TopicList
>
<
TopicItem
className
=
"topic-title"
>
Topic
<
/TopicItem
>
<
TopicItem
className
=
"topic-view"
>
View
<
/TopicItem
>
<
TopicItem
className
=
"topic-reply"
>
Reply
<
/TopicItem
>
<
TopicItem
className
=
"topic-date"
>
Date
<
/TopicItem
>
<
/TopicList
>
<
/PostItem
>
<
PostItem
className
=
"post-content"
>
<
TopicList
>
<
TopicItem
className
=
"topic-title"
>
Title
-
One
<
/TopicItem
>
<
TopicItem
className
=
"topic-view"
>
One
-
View
<
/TopicItem
>
<
TopicItem
className
=
"topic-reply"
>
Zero
-
Reply
<
/TopicItem
>
<
TopicItem
className
=
"topic-date"
>
2020
-
Date
<
/TopicItem
>
<
/TopicList
>
<
/PostItem
>
<
/PostList
>
<
/MainSection
>
<
PaginationBox
>
<
PaginationList
>
<
PaginationItem
>
paging
number
<
/PaginationItem
>
<
/PaginationList
>
<
/PaginationBox
>
<
/ContentMain
>
<
/ContentWrapper
>
<
Footer
/>
<
/
>
);
};
Please
register
or
login
to post a comment