32 lines
1021 B
TypeScript
32 lines
1021 B
TypeScript
import { FC } from 'react'
|
|
import { Recipe } from '../../../src/types'
|
|
import { EntityIcon } from '../EntityIcon/EntityIcon'
|
|
import styles from './Recipe.module.css'
|
|
import { I18n } from '../../shared/I18n/I18n'
|
|
|
|
interface Props {
|
|
recipe: Recipe
|
|
}
|
|
|
|
export const RecipeSpan: FC<Props> = ({ recipe }) => {
|
|
const toEntityIcon = ([key, amount]: [string, number | undefined]) => (
|
|
<EntityIcon key={key} value={key} amount={amount} />
|
|
)
|
|
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(toEntityIcon)
|
|
const after = Object.entries({ ...recipe.output }).map(toEntityIcon)
|
|
return (
|
|
<span className={styles.recipe}>
|
|
{joinByPlus([toEntityIcon(['/Time', recipe.time]), ...before])}{' '}
|
|
<I18n id={'component.recipe.arrow'} /> {joinByPlus(after)}
|
|
</span>
|
|
)
|
|
}
|