Moving files around

components/home/EntitySpan/EntitySpan.module.css

@@ -0,0 +1,73 @@
+.span {
+    background: #DDD;
+    font-size: 1em;
+    border: 1px solid white;
+    display: inline-block;
+    position: relative;
+}
+
+.tooltip {
+    --background: lightsalmon;
+    --arrow-width: 0.6em;
+    --arrow-height: 0.4em;
+    display: none;
+    position: absolute;
+    left: calc(100% + var(--arrow-width));
+    top: -500%;
+    bottom: -500%;
+    margin: auto 0;
+    width: max-content;
+    height: max-content;
+    background: var(--background);
+    padding: 0.5em;
+    border-radius: 0.7em;
+    z-index: 1;
+}
+
+.span:hover > .tooltip {
+    display: initial;
+}
+
+.tooltip::before {
+    content: "";
+    border-style: solid;
+    top: -500%;
+    bottom: -500%;
+    margin: auto 0;
+    height: max-content;
+    border-width: var(--arrow-height) var(--arrow-width) var(--arrow-height) 0;
+    border-color: transparent var(--background) transparent transparent;
+    position: absolute;
+    left: calc(var(--arrow-width) * -1 + 1px);
+}
+
+.img {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-inline-end: 0.2em;
+    transform: translateY(0.1em);
+}
+
+.strong {
+    font-weight: 600;
+    margin-block: 1em 0.4em;
+}
+
+.strong:first-child {
+    margin-block-start: 0;
+}
+
+.leftClick {
+    height: 1em;
+    transform: translateY(0.1em);
+}
+
+.rightClick {
+    height: 1em;
+    transform: scaleX(-1) translateY(0.1em);
+}
+
+.clickBtn {
+    fill: red;
+}

components/home/EntitySpan/EntitySpan.tsx

@@ -0,0 +1,47 @@
+import {FC, HTMLProps, useMemo} from "react"
+import {Entity} from "../../../src/types"
+import {useDetails} from "../../../src/hooks/useDetails"
+import styles from './EntitySpan.module.css'
+import {RecipeSpan} from "../Recipe/Recipe";
+import {LeftClickIcon} from "../LeftClickIcon/LeftClickIcon";
+
+interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
+  value: Entity|string
+  leftClickText?: string
+  rightClickText?: string
+}
+
+export const EntitySpan: FC<Props> = ({value, leftClickText, rightClickText, ...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}/>
+    {entity.name}
+    <div className={styles.tooltip}>
+      {entity.recipe && (
+        <>
+          <div className={styles.strong}>Recipe</div>
+          <RecipeSpan recipe={entity.recipe}/>
+        </>
+      )}
+      {(leftClickText || rightClickText) && (
+        <>
+          <div className={styles.strong}>Actions</div>
+          {leftClickText && <div><LeftClickIcon className={styles.leftClick} classClick={styles.clickBtn}/> {leftClickText}</div>}
+          {rightClickText && <div><LeftClickIcon className={styles.rightClick} classClick={styles.clickBtn}/> {rightClickText}</div>}
+        </>
+      )}
+    </div>
+  </span>
+}