Added the producing graph

components/home/EntityIcon/EntityIcon.module.css

@@ -22,6 +22,11 @@
     margin-inline-end: 0.2em;
 }
 
+.noAmount {
+    margin-inline: 0.1em;
+    margin-block: 0.1em -0.1em;
+}
+
 @media (prefers-color-scheme: dark) {
     .span {
         border-color: #111111;

components/home/EntityIcon/EntityIcon.tsx

@@ -2,28 +2,36 @@ import {FC, HTMLProps, useMemo} from "react"
 import {Entity} from "../../../src/types"
 import {useFactories} from "../../../src/hooks/useFactories"
 import styles from './EntityIcon.module.css'
+import cx from "classnames";
 
 interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
   value: Entity|string
   amount?: number
 }
 
-export const EntityIcon: FC<Props> = ({value, amount, ...rest}) => {
+export const EntityIcon: FC<Props> = ({className, value, amount, ...rest}) => {
   const {findFactory} = useFactories()
   const entity = useMemo<Entity>(() => {
     return typeof value === "object"
       ? value
-      : findFactory(value) ?? {
-        href: value,
-        name: value,
-        image: value,
-        recipe: undefined
-      }
+      : value === '/Time'
+        ? {
+          href: '/Time',
+          name: 'Time',
+          image: '/images/Time.png',
+          recipe: undefined
+        }
+        : findFactory(value) ?? {
+          href: value,
+          name: value,
+          image: value,
+          recipe: undefined
+        }
   }, [findFactory, value])
 
-  return <span className={styles.span} {...rest}>
+  return <span {...rest} className={cx(className, styles.span)} title={entity.name}>
     {/* eslint-disable-next-line @next/next/no-img-element */}
-    <img className={styles.img} src={`https://wiki.factorio.com${entity.image}`} alt={entity.name}/>
+    <img className={cx(styles.img, amount === undefined ? styles.noAmount : undefined)} src={`https://wiki.factorio.com${entity.image}`} alt={entity.name}/>
     {amount !== undefined && <span className={styles.amount}>{amount}</span>}
   </span>
 }