Improvements in performance

components/home/EntityIcon/EntityIcon.module.css

@@ -22,6 +22,9 @@
     margin-inline-end: 0.2em;
 }
 
-.strong {
-    font-weight: 600;
+@media (prefers-color-scheme: dark) {
+    .span {
+        border-color: #111111;
+        background-color: #444;
+    }
 }

components/home/EntityIcon/EntityIcon.tsx

@@ -1,6 +1,6 @@
 import {FC, HTMLProps, useMemo} from "react"
 import {Entity} from "../../../src/types"
-import {useDetails} from "../../../src/hooks/useDetails"
+import {useFactories} from "../../../src/hooks/useFactories"
 import styles from './EntityIcon.module.css'
 
 interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
@@ -9,17 +9,17 @@ interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
 }
 
 export const EntityIcon: FC<Props> = ({value, amount, ...rest}) => {
-  const details = useDetails()
+  const {findFactory} = useFactories()
   const entity = useMemo<Entity>(() => {
     return typeof value === "object"
       ? value
-      : details.find(detail => detail.href === value) ?? {
+      : findFactory(value) ?? {
         href: value,
         name: value,
         image: value,
         recipe: undefined
       }
-  }, [details, value])
+  }, [findFactory, value])
 
   return <span className={styles.span} {...rest}>
     {/* eslint-disable-next-line @next/next/no-img-element */}