1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import imgApi from 'ba-api/images';
import avatarApi from 'ba-api/avatars';
import { Typography, Grid, Divider } from '@material-ui/core';
import GeneralCard from '../CardPaper/GeneralCard';
import PostCard from '../CardPaper/PostCard';
import Quote from '../Quote/Quote';
const styles = theme => ({
divider: {
margin: `${theme.spacing(3)}px 0`,
},
});
class Favorites extends React.Component {
render() {
const { classes } = this.props;
const bull = <span className={classes.bullet}>•</span>;
return (
<Grid
container
justify="center"
direction="row"
spacing={3}
>
<Grid item md={6}>
<PostCard
liked={1}
shared={20}
commented={15}
date="Sept, 25 2018"
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum."
image={imgApi[5]}
avatar={avatarApi[6]}
name="John Doe"
/>
<Divider className={classes.divider} />
<GeneralCard liked={1} shared={20} commented={15}>
<Typography className={classes.title} color="textSecondary">
Word of the Day
</Typography>
<Typography variant="h5" component="h2">
be
{bull}
nev
{bull}
o
{bull}
lent
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
<Typography component="p">
well meaning and kindly.
<br />
{'"a benevolent smile"'}
</Typography>
</GeneralCard>
<Divider className={classes.divider} />
<PostCard
liked={1}
shared={20}
commented={15}
date="Sept, 25 2018"
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum."
image={imgApi[16]}
avatar={avatarApi[6]}
name="John Doe"
/>
<Divider className={classes.divider} />
<PostCard
liked={90}
shared={10}
commented={22}
date="Sept, 15 2018"
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum."
avatar={avatarApi[5]}
name="Jane Doe"
/>
</Grid>
<Grid item md={6}>
<PostCard
liked={90}
shared={10}
commented={22}
date="Sept, 15 2018"
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum."
avatar={avatarApi[4]}
name="Jane Doe"
/>
<Divider className={classes.divider} />
<PostCard
liked={1}
shared={20}
commented={15}
date="Sept, 25 2018"
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum."
image={imgApi[20]}
avatar={avatarApi[6]}
name="John Doe"
/>
<Divider className={classes.divider} />
<GeneralCard liked={1} shared={20} commented={15}>
<Quote align="left" content="Imagine all the people living life in peace. You may say I'm a dreamer, but I'm not the only one. I hope someday you'll join us, and the world will be as one." footnote="John Lennon" />
</GeneralCard>
<Divider className={classes.divider} />
<PostCard
liked={90}
shared={10}
commented={22}
date="Sept, 15 2018"
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum."
avatar={avatarApi[1]}
name="Jane Doe"
/>
</Grid>
</Grid>
);
}
}
Favorites.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Favorites);
|
