blob: df5b422224dc9ee2f5dbc9c96eef0ed0f5166e1a (
plain) (
blame)
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
|
import { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import RecipePreviewModel from '../../../models/RecipePreview';
class RecipeItem extends Component {
static propTypes = {
recipe: PropTypes.instanceOf(RecipePreviewModel).isRequired,
onClick: PropTypes.func.isRequired,
};
render() {
const { recipe, onClick } = this.props;
return (
<button type="button" className="recipe-teaser" onClick={onClick}>
{recipe.isDevRecipe && (
<span className="recipe-teaser__dev-badge">dev</span>
)}
<img src={recipe.icons.svg} className="recipe-teaser__icon" alt="" />
<span className="recipe-teaser__label">{recipe.name}</span>
{recipe.aliases && recipe.aliases.length > 0 && (
<span className="recipe-teaser__alias_label">
{`Aliases: ${recipe.aliases.join(', ')}`}
</span>
)}
</button>
);
}
}
export default observer(RecipeItem);
|