openreplay/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
2022-02-21 16:41:04 +01:00

25 lines
718 B
TypeScript

import React from 'react'
import { Popup } from 'UI'
import cn from 'classnames'
import MetaItem from '../MetaItem';
import MetaMoreButton from '../MetaMoreButton';
interface Props {
className?: string,
metaList: []
}
const MAX_LENGTH = 3;
export default function SessionMetaList(props: Props) {
const { className = '', metaList } = props
return (
<div className={cn("text-sm flex items-start", className)}>
{metaList.slice(0, MAX_LENGTH).map(({ label, value }, index) => (
<MetaItem key={index} label={label} value={''+value} className="mr-3" />
))}
{metaList.length > MAX_LENGTH && (
<MetaMoreButton list={metaList} maxLength={MAX_LENGTH} />
)}
</div>
)
}