@bigfishtv/cockpit/src/components/cell/EntityLinkCell.js

import React from 'react'
import { Link } from 'react-router-dom'

import Button from '../button/Button'
import Icon from '../Icon'

function defaultLabelRenderer(value) {
	return value.name || value.title || value.label || value.first_name
}

const EntityLinkCell = ({ value, model, onChange, labelRenderer = defaultLabelRenderer }) => (
	<div className="cell">
		<div className="cell-icon">
			<Icon name="link" size="18" />
		</div>
		<div className="cell-content">
			<Link to={`/${model}/${value.id}`}>{labelRenderer(value)}</Link>
		</div>
		<div className="cell-control">
			<Button size="icon" onClick={() => onChange(null)}>
				<Icon name="close" size="18" />
			</Button>
		</div>
	</div>
)

export default EntityLinkCell