62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { FC, HTMLProps } from 'react'
|
|
import { EnrichedEntity } from '../../../src/types'
|
|
import cx from 'classnames'
|
|
import styles from './NodeOverview.module.css'
|
|
import Link from 'next/link'
|
|
import { EntityIcon } from '../../home/EntityIcon/EntityIcon'
|
|
import { GraphNode } from '../../../src/graph-untangle/types'
|
|
import { fixedEncodeURIComponent } from '../../../src/utils'
|
|
import { useRouter } from 'next/router'
|
|
|
|
export type OverviewGraphNode = GraphNode<{
|
|
icons: (EnrichedEntity | string)[]
|
|
}>
|
|
|
|
interface Props extends HTMLProps<HTMLDivElement> {
|
|
node: OverviewGraphNode
|
|
}
|
|
|
|
export const NodeOverview: FC<Props> = ({ node, className, ...props }) => {
|
|
const router = useRouter()
|
|
return (
|
|
<div {...props} className={cx(className, styles.root)}>
|
|
<h3>
|
|
<span className={styles.linkOut}>
|
|
<Link
|
|
href={{
|
|
pathname: `/visualize/${fixedEncodeURIComponent(node.name)}`,
|
|
query: router.query
|
|
}}
|
|
>
|
|
👁
|
|
</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>
|
|
)
|
|
}
|