24 lines
826 B
TypeScript
24 lines
826 B
TypeScript
import {FC} from "react"
|
|
import {Recipe} from "../../../src/types"
|
|
import {EntityIcon} from "../EntityIcon/EntityIcon";
|
|
import styles from './Recipe.module.css'
|
|
|
|
interface Props {
|
|
recipe: Recipe
|
|
}
|
|
|
|
export const RecipeSpan: FC<Props> = ({recipe}) => {
|
|
const joinByPlus = (elems: JSX.Element[]) => elems.reduce((acc, curr) => {
|
|
if (acc.length) {
|
|
return [...acc, '+', curr]
|
|
} else {
|
|
return [curr]
|
|
}
|
|
}, [] as (JSX.Element|string)[])
|
|
const before = Object.entries({...recipe.prerequisites}).map(([key, amount]) => <EntityIcon key={key} value={key} amount={amount} />)
|
|
const after = Object.entries({...recipe.output}).map(([key, amount]) => <EntityIcon key={key} value={key} amount={amount} />)
|
|
return <span className={styles.recipe}>
|
|
{joinByPlus(before)} → {joinByPlus(after)}
|
|
</span>
|
|
}
|