Added entity span

components/Recipe.tsx

@@ -0,0 +1,23 @@
+import {FC} from "react"
+import {Recipe} from "../src/types"
+import {EntityIcon} from "./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>
+}