Added the producing graph

components/home/Recipe/Recipe.tsx

@@ -8,6 +8,7 @@ interface Props {
 }
 
 export const RecipeSpan: FC<Props> = ({recipe}) => {
+  const toEntityIcon = ([key, amount]: [string, number]) => <EntityIcon key={key} value={key} amount={amount} />
   const joinByPlus = (elems: JSX.Element[]) => elems.reduce((acc, curr) => {
     if (acc.length) {
       return [...acc, '+', curr]
@@ -15,9 +16,9 @@ export const RecipeSpan: FC<Props> = ({recipe}) => {
       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} />)
+  const before = Object.entries({...recipe.prerequisites}).map(toEntityIcon)
+  const after = Object.entries({...recipe.output}).map(toEntityIcon)
   return <span className={styles.recipe}>
-    {joinByPlus(before)} → {joinByPlus(after)}
+    {joinByPlus([toEntityIcon(['/Time', recipe.time]), ...before])} → {joinByPlus(after)}
   </span>
 }