37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
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>
|
|
}
|