You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
import _ from 'lodash'
|
|
import { clsx } from '@/lib/utils'
|
|
|
|
export const Value = ({ value, borderless }) => {
|
|
return Array.isArray(value) ? (
|
|
<ValueArray value={value} borderless={borderless} />
|
|
) : typeof value === 'object' ? (
|
|
<ValueObject value={value} borderless={borderless} />
|
|
) : (
|
|
value
|
|
)
|
|
}
|
|
|
|
export const ValueArray = ({ value, borderless }) => {
|
|
return (
|
|
<div class={clsx('compound-value array', borderless && 'borderless')}>
|
|
{value.map(item => (
|
|
<div class="item">
|
|
<Value value={item} borderless={borderless} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const ValueObject = ({ value, borderless }) => {
|
|
return (
|
|
<div class={clsx('compound-value object', borderless && 'borderless')}>
|
|
{Object.entries(value).map(([k, v]) => (
|
|
<>
|
|
<div title={k} class="key">
|
|
{_.startCase(k)}
|
|
</div>
|
|
<div class="value">
|
|
<Value value={v} borderless={borderless} />
|
|
</div>
|
|
</>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|