blob: 55f415bd53efb4900588e2174b7c0f6d7ecad0b6 (
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
34
35
36
37
38
39
|
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import RecipePreviewModel from '../../../models/RecipePreview';
export default @observer 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>
);
}
}
|