@@ -7,32 +7,8 @@ import './style.scss'
7
7
class PostListItem extends React . Component {
8
8
render ( ) {
9
9
const { showYear } = this . props
10
- const {
11
- title,
12
- date,
13
- } = this . props . data . node . frontmatter
10
+ const { title, date, tags } = this . props . data . node . frontmatter
14
11
const { slug } = this . props . data . node . fields
15
-
16
- const readingTime = < span key = "readingTime" >
17
- { this . props . data . node . fields . readingTime . text }
18
- </ span >
19
-
20
- var tags = this . props . data . node . frontmatter . tags
21
- if ( tags != null ) {
22
- tags = tags . map ( tag => (
23
- [ < span key = { tag } >
24
- { tag }
25
- </ span > ,
26
- < span key = { `${ tag } -div` } className = "tagDivider" > ·</ span > ]
27
- ) )
28
-
29
- tags = [ ] . concat ( ...tags ) . slice ( 0 , - 1 )
30
-
31
- tags = [
32
- < span key = "tagsDivider" className = "divider" /> ,
33
- tags
34
- ]
35
- }
36
12
37
13
const itemDate = moment ( date )
38
14
@@ -61,19 +37,33 @@ class PostListItem extends React.Component {
61
37
</ Toggle >
62
38
)
63
39
40
+ const detailsHeader = (
41
+ < div className = "post-item__details-header" >
42
+ < Link to = { slug } >
43
+ { title }
44
+ </ Link >
45
+ </ div >
46
+ )
47
+
48
+ const detailsFooter = (
49
+ < ul className = "post-item__details-footer" >
50
+ < li className = "post-item__details-footer-reading-time" key = "readingTime" >
51
+ { this . props . data . node . fields . readingTime . text }
52
+ </ li >
53
+ { tags && < li className = "post-item__details-footer-tags-divider" key = "divider" /> }
54
+ { tags && tags . map ( tag => (
55
+ < li className = "post-item__details-footer-tags-item" key = { tag } >
56
+ { tag }
57
+ </ li >
58
+ ) ) }
59
+ </ ul >
60
+ )
61
+
64
62
const details = (
65
63
< Toggle isEnabled = { ! this . props . isFirst } >
66
64
< div className = "post-item__details" >
67
- < header >
68
- < Link to = { slug } >
69
- { title }
70
- </ Link >
71
- </ header >
72
-
73
- < footer >
74
- { readingTime }
75
- { tags }
76
- </ footer >
65
+ { detailsHeader }
66
+ { detailsFooter }
77
67
</ div >
78
68
</ Toggle >
79
69
)
0 commit comments