55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { FC, HTMLProps } from 'react'
|
|
import { EnrichedEntity } from '../../../src/types'
|
|
import cx from 'classnames'
|
|
import styles from './NodeOverview.module.css'
|
|
import { EntityIcon } from '../../home/EntityIcon/EntityIcon'
|
|
import { GraphNode } from '../../../src/graph-untangle/types'
|
|
import { I18n } from '../../shared/I18n/I18n'
|
|
import { ButtonVisualize } from '../../shared/ButtonVisualize/ButtonVisualize'
|
|
|
|
export type OverviewGraphNode = GraphNode<{
|
|
icons: (EnrichedEntity | 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>
|
|
<ButtonVisualize groupId={node.name} />
|
|
{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>
|
|
<I18n id={'page.visualize.overview.imports'} />
|
|
</h4>
|
|
<div className={styles.small}>
|
|
{node.inputs.map(input => (
|
|
<EntityIcon key={input} value={input} />
|
|
))}
|
|
</div>
|
|
{node.outputs.length ? (
|
|
<>
|
|
<h4>
|
|
<I18n id={'page.visualize.overview.exports'} />
|
|
</h4>
|
|
<div className={styles.small}>
|
|
{node.outputs.map(input => (
|
|
<EntityIcon key={input} value={input} />
|
|
))}
|
|
</div>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|