31 lines
615 B
JavaScript

import PropTypes from 'prop-types'
import { Flex, Tag, Typography } from 'antd'
const { Text } = Typography
const ArrayDisplay = ({ value, prefix, suffix }) => {
if (!Array.isArray(value) || value.length === 0) {
return <Text type='secondary'>n/a</Text>
}
return (
<Flex gap='small' wrap>
{value.map((item, index) => (
<Tag key={`${item}-${index}`}>
{prefix}
{item}
{suffix}
</Tag>
))}
</Flex>
)
}
ArrayDisplay.propTypes = {
value: PropTypes.array,
prefix: PropTypes.node,
suffix: PropTypes.node
}
export default ArrayDisplay