Justin Edmund
82ec214b5d
This is so we have a base for other table rows that use different interactive elements
48 lines
1 KiB
TypeScript
48 lines
1 KiB
TypeScript
import classNames from 'classnames'
|
|
import './index.scss'
|
|
|
|
interface Props {
|
|
name: string
|
|
label: string
|
|
description?: string
|
|
className?: string
|
|
imageAlt?: string
|
|
imageClass?: string
|
|
imageSrc?: string[]
|
|
children: React.ReactNode
|
|
}
|
|
|
|
const TableField = (props: Props) => {
|
|
const image = () => {
|
|
return props.imageSrc && props.imageSrc.length > 0 ? (
|
|
<div className={`preview ${props.imageClass}`}>
|
|
<img
|
|
alt={props.imageAlt}
|
|
srcSet={props.imageSrc.join(', ')}
|
|
src={props.imageSrc[0]}
|
|
/>
|
|
</div>
|
|
) : (
|
|
''
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={classNames({ TableField: true }, props.className)}>
|
|
<div className="Left">
|
|
<div className="Info">
|
|
<h3>{props.label}</h3>
|
|
<p>{props.description}</p>
|
|
</div>
|
|
<div className="Image">{image()}</div>
|
|
</div>
|
|
|
|
<div className="Right">
|
|
<div className="Image">{image()}</div>
|
|
{props.children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TableField
|