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>
+}