Stylings / Restructuring

components/visualize/NodeDetails/NodeDetails.module.css

@@ -0,0 +1,5 @@
+.root {
+    height: fit-content;
+    width: fit-content;
+    position: relative;
+}

components/visualize/NodeDetails/NodeDetails.tsx

@@ -0,0 +1,21 @@
+import {FC, HTMLProps} from "react";
+import {GraphNode} from "../../shared/ProducingGraph/ProducingGraph";
+import {Recipe} from "../../../src/types";
+import cx from "classnames";
+import styles from "./NodeDetails.module.css";
+import {RecipeSpan} from "../../home/Recipe/Recipe";
+
+export type DetailGraphNode = GraphNode<{
+  recipes: Recipe[]
+}>
+
+interface Props extends HTMLProps<HTMLDivElement> {
+  node: DetailGraphNode
+}
+
+export const NodeDetails: FC<Props> = ({node, className, ...props}) => {
+  return <div {...props} className={cx(className, styles.root)}>
+    <h3>{node.name}</h3>
+    {node.recipes.map((recipe, idx) => <RecipeSpan key={idx} recipe={recipe}/>)}
+  </div>
+}

components/visualize/NodeOverview/NodeOverview.module.css

@@ -0,0 +1,18 @@
+.root {
+    height: fit-content;
+    width: fit-content;
+}
+
+.tiny {
+     font-size: 0.5em;
+     margin-top: -1.6em;
+ }
+
+.small {
+    font-size: 0.8em;
+}
+
+.linkOut {
+    margin-inline-end: 0.5em;
+}
+

components/visualize/NodeOverview/NodeOverview.tsx

@@ -0,0 +1,36 @@
+import {FC, HTMLProps} from "react";
+import {GraphNode} from "../../shared/ProducingGraph/ProducingGraph";
+import {EnrichedEntity, Recipe} from "../../../src/types";
+import cx from "classnames";
+import styles from "./NodeOverview.module.css";
+import {RecipeSpan} from "../../home/Recipe/Recipe";
+import Link from "next/link";
+import {EntityIcon} from "../../home/EntityIcon/EntityIcon";
+
+export type OverviewGraphNode = GraphNode<{
+  icons: (EnrichedEntity|string)[]
+  linkOut: string
+}>
+
+interface Props extends HTMLProps<HTMLDivElement> {
+  node: OverviewGraphNode
+}
+
+export const NodeOverview: FC<Props> = ({node, className, ...props}) => {
+  return <div {...props} className={cx(className, styles.root)}>
+    <h3><span className={styles.linkOut}><Link href={node.linkOut}>🔗</Link></span>{node.name}</h3>
+    { node.icons?.length ? <div className={styles.tiny}>
+      {node.icons.map((input) => <EntityIcon key={typeof input === "string" ? input : input.href} value={input} />)}
+    </div> : null }
+    <h4>Inputs</h4>
+    <div className={styles.small}>
+      {node.inputs.map((input) => <EntityIcon key={input} value={input} />)}
+    </div>
+    {node.outputs.length ? <>
+      <h4>Outputs</h4>
+      <div className={styles.small}>
+        {node.outputs.map((input) => <EntityIcon key={input} value={input} />)}
+      </div>
+    </>: null}
+  </div>
+}