diff options
Diffstat (limited to 'src/components/settings/recipes/RecipeItem.js')
-rw-r--r-- | src/components/settings/recipes/RecipeItem.js | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/src/components/settings/recipes/RecipeItem.js b/src/components/settings/recipes/RecipeItem.js new file mode 100644 index 000000000..7b2f64d26 --- /dev/null +++ b/src/components/settings/recipes/RecipeItem.js | |||
@@ -0,0 +1,34 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | |||
5 | import RecipePreviewModel from '../../../models/RecipePreview'; | ||
6 | |||
7 | @observer | ||
8 | export default class RecipeItem extends Component { | ||
9 | static propTypes = { | ||
10 | recipe: PropTypes.instanceOf(RecipePreviewModel).isRequired, | ||
11 | onClick: PropTypes.func.isRequired, | ||
12 | }; | ||
13 | |||
14 | render() { | ||
15 | const { recipe, onClick } = this.props; | ||
16 | |||
17 | return ( | ||
18 | <button | ||
19 | className="recipe-teaser" | ||
20 | onClick={onClick} | ||
21 | > | ||
22 | {recipe.local && ( | ||
23 | <span className="recipe-teaser__dev-badge">dev</span> | ||
24 | )} | ||
25 | <img | ||
26 | src={recipe.icons.svg} | ||
27 | className="recipe-teaser__icon" | ||
28 | alt="" | ||
29 | /> | ||
30 | <span className="recipe-teaser__label">{recipe.name}</span> | ||
31 | </button> | ||
32 | ); | ||
33 | } | ||
34 | } | ||