diff options
Diffstat (limited to 'src/components/ui/FeatureItem.js')
-rw-r--r-- | src/components/ui/FeatureItem.js | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js new file mode 100644 index 000000000..a63f5f7b5 --- /dev/null +++ b/src/components/ui/FeatureItem.js | |||
@@ -0,0 +1,36 @@ | |||
1 | import React from 'react'; | ||
2 | import injectSheet from 'react-jss'; | ||
3 | import { Icon } from '@meetfranz/ui'; | ||
4 | import classnames from 'classnames'; | ||
5 | |||
6 | const styles = theme => ({ | ||
7 | featureItem: { | ||
8 | borderBottom: [1, 'solid', theme.legacyStyles.themeGrayDark], | ||
9 | padding: [8, 0], | ||
10 | display: 'flex', | ||
11 | alignItems: 'center', | ||
12 | }, | ||
13 | featureIcon: { | ||
14 | fill: theme.brandSuccess, | ||
15 | marginRight: 10, | ||
16 | }, | ||
17 | }); | ||
18 | |||
19 | export const FeatureItem = injectSheet(styles)(({ | ||
20 | classes, className, name, icon, | ||
21 | }) => ( | ||
22 | <li className={classnames({ | ||
23 | [classes.featureItem]: true, | ||
24 | [className]: className, | ||
25 | })} | ||
26 | > | ||
27 | {icon ? ( | ||
28 | <span className={classes.featureIcon}>{icon}</span> | ||
29 | ) : ( | ||
30 | <Icon icon="mdiCheckCircle" className={classes.featureIcon} size={1.5} /> | ||
31 | )} | ||
32 | {name} | ||
33 | </li> | ||
34 | )); | ||
35 | |||
36 | export default FeatureItem; | ||