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
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import imgApi from 'ba-api/images';
import { ProductCard } from 'ba-components';
import { Typography, Grid } from '@material-ui/core';
const styles = theme => ({
divider: {
display: 'block',
margin: `${theme.spacing(3)}px 0`,
},
});
class EcommerceCard extends React.Component {
render() {
const { classes } = this.props;
return (
<Grid
container
alignItems="flex-start"
justify="center"
direction="row"
spacing={2}
>
<Grid item md={4}>
<Typography variant="button" className={classes.divider}>Product Card</Typography>
<ProductCard
thumbnail={imgApi[21]}
name="Lorem ipsum dolor sit amet"
desc="Sed imperdiet enim ligula, vitae viverra justo porta vel. Duis eget felis bibendum, pretium mi sed, placerat ante."
ratting={5}
price={30}
/>
</Grid>
<Grid item md={4}>
<Typography variant="button" className={classes.divider}>Product with discount</Typography>
<ProductCard
discount="10%"
thumbnail={imgApi[22]}
name="Cras convallis lacus orci"
desc="Phasellus ante massa, aliquam non ante at"
ratting={3}
price={18}
prevPrice={20}
/>
</Grid>
<Grid item md={4}>
<Typography variant="button" className={classes.divider}>Sold Out Product</Typography>
<ProductCard
soldout
thumbnail={imgApi[23]}
name="Lorem ipsum dolor sit amet"
desc="Sed imperdiet enim ligula, vitae viverra justo porta vel. Duis eget felis bibendum, pretium mi sed, placerat ante."
ratting={4}
price={44}
/>
</Grid>
<Grid item md={12}>
<Typography variant="button" className={classes.divider}>List Mode</Typography>
<ProductCard
discount="10%"
thumbnail={imgApi[24]}
name="Lorem ipsum dolor sit amet"
desc="Sed imperdiet enim ligula, vitae viverra justo porta vel. Duis eget felis bibendum, pretium mi sed, placerat ante."
ratting={5}
price={30}
prevPrice={20}
list
/>
</Grid>
<Grid item md={12}>
<ProductCard
thumbnail={imgApi[25]}
name="Lorem ipsum dolor sit amet"
desc="Sed imperdiet enim ligula, vitae viverra justo porta vel. Duis eget felis bibendum, pretium mi sed, placerat ante."
ratting={0}
price={20}
list
/>
</Grid>
</Grid>
);
}
}
EcommerceCard.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(EcommerceCard);
|
