blob: 1dfe8868363bccf13470dfa302705cb921a2e22f (
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
|
import { Component } from 'react';
import { observer } from 'mobx-react';
import RecipePreviewModel from '../../../models/RecipePreview';
type Props = {
recipe: RecipePreviewModel;
onClick: () => {};
};
class RecipeItem extends Component<Props> {
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.icon} 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);
|