src/components/settings/recipes/RecipeItem.js


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>
    );
  }
}