Moving files around

components/home/EntityIcon/EntityIcon.module.css

@@ -0,0 +1,27 @@
+.span {
+    background: #DDD;
+    font-size: 2em;
+    border: 1px solid white;
+    display: inline-block;
+    position: relative;
+}
+
+.amount {
+    position: absolute;
+    inset-inline-end: 0.2em;
+    inset-block-end: 0;
+    font-size: 50%;
+    color: white;
+    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+}
+
+.img {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-inline-end: 0.2em;
+}
+
+.strong {
+    font-weight: 600;
+}

components/home/EntityIcon/EntityIcon.tsx

@@ -0,0 +1,29 @@
+import {FC, HTMLProps, useMemo} from "react"
+import {Entity} from "../../../src/types"
+import {useDetails} from "../../../src/hooks/useDetails"
+import styles from './EntityIcon.module.css'
+
+interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
+  value: Entity|string
+  amount?: number
+}
+
+export const EntityIcon: FC<Props> = ({value, amount, ...rest}) => {
+  const details = useDetails()
+  const entity = useMemo<Entity>(() => {
+    return typeof value === "object"
+      ? value
+      : details.find(detail => detail.href === value) ?? {
+        href: value,
+        name: value,
+        image: value,
+        recipe: undefined
+      }
+  }, [details, value])
+
+  return <span className={styles.span} {...rest}>
+    {/* eslint-disable-next-line @next/next/no-img-element */}
+    <img className={styles.img} src={`https://wiki.factorio.com${entity.image}`} alt={entity.name}/>
+    {amount !== undefined && <span className={styles.amount}>{amount}</span>}
+  </span>
+}